vue-cli4

基本使用

安装

1. 卸载其他脚手架(如果全局有): npm uninstall vue-cli -g
2. 强力清除缓存(如果执行过第一步 还装不了4.0) : npm cache clean --force
3. 清除缓存目录(如果执行过第二步 还装不了4.0)
    npm root -g 查阅npm的全局根目录
    往前走两层 删除npm-cache目录
4. 安装4.0脚手架
    npm i @vue/cli -g

创建项目

vue create <project-name>

开发环境启动（启动项目）

npm run serve

生产环境启动

npm run build

配置

创建vue.config.js文件 该文件是一个可选的配置文件，
    如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli自动加载.
    这个文件应该导出一个包含了选项的对象：
        // vue.config.js
        module.exports = {
          // 选项...
        }

4.0脚手架的配置

const path = require('path')//内置模块
const data = require("./src/json/data")
function resolve (dir) {return path.join(__dirname, dir)}//相对路径
module.exports = {
    // 输出目录
    outputDir:"dist",
    //webpack中所有的关于webpack-dev-server的配置项;这边都支持
    devServer:{
        open:true,
        before(app){
            //钩子  在webpack-dev-server启动时 当前钩子会被执行
            //app   express核心对象;可以使用app来注册后台路由 模拟接口
            app.get("/mock",(req,res)=>{res.json({code:200,data})})
            // ...
        }
    },
    lintOnSave:false,
    configureWebpack:{
        //允許大家编写原生的webpack配置
        resolve:{
        //配别名
            alias:{
                test:resolve("src/test")
            }
        }
    }
}

4.0脚手架把webpack相关的配置全部隐藏起来了(之前2.0有的所有配置;4.0都有)
4.0脚手架为了让vue开发者远离webpack的配置;自己定义了一个vue.config.js的配置文件
    vue.config.js:
        outputDir : 配置生产环境打包生成的项目目录名称;输出目录
        devServer : webpack-dev-server 所有的配置;当前devServer都支持
        lintOnSave : 控制项目的eslint的检验是否开启
            false: 关闭eslint检验
            true: 开启eslint检验 但不是强约束 代码保存时 界面上不会有eslint的错误提示
            "error": 开启eslint检验 是强约束 代码保存时 界面上会有eslint的错误提示
        configureWebpack: 所有webpack的原生配置;当前配置项都支持


	    outputDir
	        Type: string
	        Default: 'dist'
	        当使用build进行生产环境构建时。生成的构建目录
	    devServer
	            Type: Object
	            所有 webpack-dev-server 的选项都支持
	    lintOnSave
	        Type: boolean | 'true'
	        Default: "error"
	        @vue/cli4.0 的脚手架 默认选用的eslint的配置是recommended级别的
	        是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。
	        这个值会在 @vue/cli-plugin-eslint 被安装之后生效。
	
	        设置为 true 时，控制台输出警告;可是页面上不会显示
	        设置为 false 时，关闭eslint校验
	        设置为 "error" 时: 控制台输出警告;页面上也会显示
	
	    configureWebpack(写webpack的原生配置)
	                Type: Object
	                configureWebpack的属性值会通过 webpack-merge 合并到最终的配置中。

如何修改windows的环境变量

set : 查看当前windows操作系统所有的环境变量
set name : 查看指定的环境变量的值
set name=val : 设置环境变量(一次性的 关闭命令行窗口后 当前的设置就会失效)
set name= : 删除环境变量