VUE-CLI3配置

一、安装

脚手架3.0以下： npm install -g vue-cli @版本号
脚手架3.0以上： npm install -g @vue/cli @版本号
1.node.js安装
nodejs官网：https://nodejs.org/en/，最好安装在默认文件里面
2.安装vue脚手架
npm install -g @vue/cli
卸载脚手架：npm uninstall vue-cli -g
查看版本号：vue -V
3.创建项目
vue create 项目名
选择项目需要的一些特性()

上下键到目标选项，空格键选中或者取消选择，根据项目需要自行配置

项目结构：

node_modules：项目需要的依赖
public:静态资源打包不被压缩，直接复制到dist里面
src/assets: 静态文件比如图片、css、js脚本
src/components: 一般用来存放公共组件
src/router: 路由相关配置
src/views: 页面
src/App.vue: 根组件
src/main.js: 项目入口文件（公共组件引入，vue实例化）
.gitignore: git 配置文件。比如不需要上传的文件在这里面做配置
pakage.json: npm配置项，项目运行打包命令都可以在这里面javascript里面查看配置

二、配置

1.package.json文件

2.配置打包后文件的运行环境
安装serve服务器：npm install -g serve
运行：1.cd dist(打包后的文件) 2. serve

3.环境变量配置
项目根目录下新建.env文件
变量必须以 VUE_APP_开头否则获取到的为undefined
VUE_APP_BASEURL = http://xxxxx.com

打印结果

生产环境变量配置：
在根目录下配置.env.production
开发环境变量配置：
根目录下新建：.env.development

打印：

开发环境下运行结果：

打包后，生产环境运行结果：

4. vue.config.js配置

module.exports = {
    publicPath: '/', // 跟目录路径，这个路劲根据包所在服务器位置相对服务器根目录决定的。
    outputDir: 'dist', // npm run build 会在项目根目录新建一个dist文件夹，打包后的文件会存进dist文件夹里面（输出目录）
    assetsDir: "assets", // 存放静态资源img,css,js
    lintOnSave: false, // 是否开启eslint监测，false不开启，true开启，开启后会根据他自身规则严格管理项目编码的风格
    productionSourceMap: true, // 生产环境下，可以断点检测代码,可以在浏览器控制台sources里面查看有什么不同
    // 生产环境下服务器配置
    devServer: {
        open: false, //是否在启动项目后自动打开浏览器
        host: "localhost", //主机，0.0.0.0支持局域网地址，可以用真机测试
        port: 8080, //端口
        https: false, //是否启动https
        //配置跨域代理
        proxy: {
            "/api": {
                target: "http://vueshop.glbuys.com/api",
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ""
                }
            } // 重写路径
        }
        // 写法作用与上面写法相同
        // proxy:{
        //     "/api":{
        //     target:"http://vueshop.glbuys.com"
        // }
    },
    configureWebpack: {
        devtool: 'source-map' //配置开发者环境的sourceMap用于断点调试
    }
}

5.eslint
官网：http://eslint.cn
作用

1. 提供编码规范；
2. 提供自动检验代码的程序，并打印检验结果：告诉你哪一个文件哪一行代码不符合
   哪一条编码规范，方便你去修改代码。
   在vue-cli3里面使用需要安装：
   npm install --save-dev eslint babel-eslint @vue/cli-plugin-eslint eslint-plugin-vue

// 在package.json里面添加
"eslintConfig": {
"root": true, //此项是用来告诉eslint找当前配置文件不能往父级查找
"env": {
"node": true //此项指定环境的全局变量，下面的配置指定为node环境
},
"extends": [// 此项是用来配置vue.js风格，就是说写代码的时候要规范的写
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {//规则配置写在这里
"semi": ["error", "always"],
"no-plusplus": ["error", { "allowForLoopAfterthoughts": true }]
},
"parserOptions": {
"parser": "babel-eslint"//此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包
装使其与ESLint解析 }

package.json

{
    "name": "store-app",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build"
    },
    "dependencies": {
        "core-js": "^3.6.5",
        "vue": "^2.6.11"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "vue-template-compiler": "^2.6.11"
    },
    "eslintConfig": {
        "root": true,
        "env": {
            "node": true
        },
        "extends": [
            "plugin:vue/essential",
            "eslint:recommended"
        ],
        "rules": {
            "semi": ["error", "always"],
            "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }]
        },
        "parserOptions": {
            "parser": "babel-eslint"
        }
    }
}