vue学习笔记(四)Vue-cli 3.0脚手架

Vue-cli 3.0搭建第一个项目

npm install -g @vue/cli    //安装全局cli
vue -V                              //查看版本
vue create hello              //创建一个hello项目
npm run serve                //运行项目

Vue-cli 3.0添加插件

vue add 插件名

Vue-cli 3.0全局环境变量

项目根路径创建.env文件
点击查看详情

Vue-cli 3.0独立运行vue文件

vue serve 文件名.vue
npm install -g @vue/cli-service-global    //需要安装全局依赖

Vue-cli 3.0图形页面构建项目

vue ui

Vue-cli 3.0配置基础的路径以及跨域请求

项目根目录创建vue.config.js文件

module.exports = {
    publicPath: "/", //根路径
    outputDir: "dist",//打包目录名
    assetsDir: "assets",//静态资源目录(js,css,fonts,img)
    lintOnSave: false,//是否打开eslint语法检测
    devServer: {
        open: true,  //运行项目浏览器自动打开
        host: 'localhost',//对应主机名
        port: 80,//端口号
        https: true,//启用https
        hotOnly: false,//热更新
        proxy: {//配置跨域
            '/api': {
                target: 'http://diwnag.com:8080/api',//接口域名
                secure:false,//如果是https借口,需要这个参数
                ws: true,//是否允许跨域
                changOrigin: true,//是否跨域
                pathRewrite:{//需要rewrite
                    '^/api':''
                }
            }
        }
    }
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容