美文网首页vue
vue学习笔记(四)Vue-cli 3.0脚手架

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

作者: 帝王弦 | 来源:发表于2019-04-14 14:09 被阅读41次

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':''
                }
            }
        }
    }
}

相关文章

网友评论

    本文标题:vue学习笔记(四)Vue-cli 3.0脚手架

    本文链接:https://www.haomeiwen.com/subject/qwydwqtx.html