@[TOC](Vue CLI 3 脚手架搭建)

注意 see -> cli.vuejs.org/zh/guide/

1. Vue CLI 的包名称由 vue-cli 改成了 @vue/cli
2. Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。
3. 卸载旧版本 npm uninstall vue-cli -g 或 yarn global remove vue-cli
4. 安装 npm install -g @vue/cli 或 yarn global add @vue/cli
5. 你还可以用这个命令来检查其版本是否正确 (3.x)： vue --version [^1]: mermaid语法说明

Vue CLI 3 搭建

1. 创建项目

vue create hello-world
复制代码

1. 你会被提示选取一个 preset

2. 默认配置

3. 手动配置 （方向键上下移动，空格选中，Enter确定，自定义配置中，您将会看到这些配置项：

4. 手动细节配置

//是否使用babel做转义
?Use class-style component syntax?
//是否使用router
?Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
// css预处理器
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSSLessStylus
//选择语法检测规范
?Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention onlyESLint + Airbnb configESLint + Standard configESLint + Prettier
// 选择 保存时检查 / 提交时检查
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save( ) Lint and fix on commit
//选择配置信息存放位置，单独存放或者并入package.json
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config filesIn package.json
//是否保存当前预设，下次构建无需再次配置
? Save this as a preset for future projects? (y/N)
复制代码

完成安装

目录

自定义配置文件 vue.config.js

module.config={//基本路径baseUrl:"/", //输出文件路径outputDir:"dist", // eslint-loader 是否在保存的时候检查lintOnSave:true,//是否使用包含运行时编译器的 Vue 构建版本runtimeCompiler:true,//https://cli.vuejs.org/zh/config/#chainwebpackchainWebpack:()=>{},//https://cli.vuejs.org/zh/config/#configurewebpackconfigureWebpack:()=>{},//生产环境是否生成 sourceMap 文件productionSourceMap:true,//css相关配置css:{// 是否使用css分离插件 ExtractTextPluginextract:true,// 开启 CSS source maps?sourceMap:true,// css预设器配置项loaderOptions:{},// 启用 CSS modules for all css / pre-processor files.modules:false},// 是否启用dlldll:false,// PWA 插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwapwa: {},//是否为 Babel 或 TypeScript 使用 thread-loaderparallel:require('os').cpus().length > 1,// webpack-dev-server 相关配置  https://www.webpackjs.com/configuration/dev-server/devServer:{open:process.platform === 'darwin',//返回当前平台类型('darwin','freebsd','linux','sunos'或者 'win32')host:"0,0,0,0",port:"8080",https:false, //dev-server 通过 HTTP 提供服务hotOnly:false,proxy:null,/*proxy:{"/api":{target:"localhost:8080",changeOrigin:true,pathRePath:{"^/api":"/mock"}}}*/before(app){}},//第三方插件配置pluginOptions:{}
}
复制代码

运行

npm run serve   运行
npm run build   打包
npm run lint    语法检测
复制代码

运行成功