1.先全局安装vue-cli3.0

检测安装：vue -V

创建

这里如果你是第一次用3.0版本的话，是没有前两个的，而只有最后两个，这里是让你选的，第一个是默认配置，一般选第二个，自己配置，这里选择最后一个

当你选择后会出现上面图上的东西，这里你可以自由选择用哪些配置，按上下键选择哪一个，按空格键确定，所有的都选择好后，按enter键进行下一步，这里演示，我随便选了几个

下一步之后问询问你安装哪一种 CSS 预处理语言，你随意选择，我是一直用的less

上面这个是问你选择哪个自动化代码格式化检测，配合vscode编辑器的Prettier - Code formatter插件，我选的随后一个

这里第一个选项是问你是否保存刚才的配置，选择确定后你下次再创建新项目就有你以前选择的配置了，不用重新再配置一遍了

1. 上边这俩意思问你像，babel,postcss,eslint这些配置文件放哪？
2. 第一个是：放独立文件放置
3. 第二个是：放package.json里
4. 这里推荐放单独配置文件，选第一个

上边倒数第二行问你是否将以上这些将此保存为未来项目的预配置吗？最后一个是描述项目，你随意选择，点击确定就开始下载模板了

这里发现少了vue.config.js文件，那以前的配置怎么搞？下边你要做的就是在根目录下新建一个vue.config.js文件，进行你的配置，具体配置看文档，我在最下边简单罗列了几个

package.json配置

"scripts": { 
 "serve": "vue-cli-service serve", 
 "build": "vue-cli-service build",
 "release": "vue-cli-service build --mode release", 
 "lint": "vue-cli-service lint" 
}

4.打包命令

• 打包测试版本：npm run build
• 打包正式版本：npm run release
• 打包好的文件分别放在dist/release中

打包文件优化

1.安装插件

• uglifyjs-webpack-plugin //去除console
• compression-webpack-plugin //gzip压缩

npm install --save -dev uglifyjs-webpack-plugin compression-webpack-plugin

vue.config.js配置

//去console插件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
//gzip压缩插件
const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports={
 // 基本路径 
 baseUrl: '/', 
 // 输出文件目录 
 outputDir: 'dist', 
 // 用于嵌套生成的静态资产（js，css，img，fonts）的目录。 
 assetsDir: '', 
 // 以多页模式构建应用程序。 
 pages: undefined, 
 // eslint-loader 是否在保存的时候检查 
 lintOnSave: true, 
 // 是否使用包含运行时编译器的Vue核心的构建。
 runtimeCompiler: false, 
 // 默认情况下babel-loader忽略其中的所有文件node_modules。
 transpileDependencies: [],
 // 生产环境sourceMap 
 productionSourceMap: true, 
 // webpack配置 
 configureWebpack: () => {},
 chainWebpack: () => {}, 
 // css相关配置
 css: { 
 // 启用 CSS modules 
 modules: false, 
 // 是否使用css分离插件 
 extract: true, 
 // 开启 CSS source maps? 
 sourceMap: false, 
 // css预设器配置项 
 loaderOptions: {}, 
 }
 // webpack-dev-server 相关配置
 devServer: {
 host: '0.0.0.0', 
 port: 8080, 
 https: false, 
 hotOnly: false,
 proxy: null, // 设置代理 
 before: app => {} 
 },
 parallel: require('os').cpus().length > 1,
 // PWA 插件相关配置
 pwa: {},
 // 第三方插件配置
 pluginOptions: {
 // ...
 }
}