vue-cli3.0 吃过的坑

为什么要使用 vue-cli3.0

1. 模板更加制定化

2. 配置更加简洁

如何新建项目

使用 npm 全局安装 vue-cli ：

1. npm install -g @vue/cli //如果已经安装过就不用安装了
   我自己喜欢用yarn 安装
   2 yarn global add @vue/cli

创建项目执行：

1. vue create my-project//my-project 就是你自己随意起的一个文件夹名字

选择项目类型

VueCLI v3.0.0-beta.6? Please pick a preset:(Use arrow keys)> xs-default(vue-router, vuex, stylus, babel, pwa, eslint, unit-jest)// 这是我运行过之后的默认设置，第一次执行create是没有的default(babel, eslint)> Manually select features//我选的是手动安装  因为不喜欢用eslint 如果实在是不幸装了这个 就在自己配置的vue.config.js里面去加一行代码    lintOnSave:false, 表示关闭格式化检查// 注：按键盘上下键选择默认（default）还是手动（Manually），//如果选择default，一路回车执行下去就行了（注：现在vue-cli3.0默认使用yarn下载），这里我选择手动，

选择特性支持

? Please pick a preset: Manually select features? Check the features neededfor your project:(Press<space> to select,<a> to toggle all,<i> to invert selection)>() TypeScript// 支持使用 TypeScript 书写源码() Progressive WebApp(PWA) Support// PWA 支持(*) Router// 支持 vue-router() Vuex// 支持 vuex(*)CSS Pre-processors// 支持 CSS 预处理器。(*) Linter/ Formatter// 支持代码风格检查和格式化。() Unit Testing// 支持单元测试。()E2E Testing// 支持 E2E 测试。// 注意：你要集成什么就选就行了（注：空格键是选中与取消，A键是全选）//打*是我的选的配置

选择css预处理，这里我选择less

? Please pick a preset: Manually select features? Check the features neededfor your project: Router, Vuex,CSS Pre-processors, Linter, Unit? Pick aCSS pre-processor(PostCSS, Autoprefixer andCSS Modules are supported bydefault):SCSS/SASS>LESS   Stylus

选择ESLint + Prettier

? Please pick a preset: Manually select features? Check the features neededfor your project: Router, Vuex,CSS Pre-processors, Linter, Unit? Pick aCSS pre-processor(PostCSS, Autoprefixer andCSS Modules are supported bydefault): Stylus? Pick a linter/ formatter config:(Use arrow keys)> ESLintwith error prevention only   ESLint+ Airbnb config   ESLint+ Standard config   ESLint+ Prettier//这里逃脱不了感觉, 所以最后还是自己配一个vue.config.js吧  然后这里去关闭eslint

选择语法检查方式，这里我选择保存就检测

 VueCLI v3.0.0-beta.6? Please pick a preset: Manually select features? Check the features neededfor your project: Router, Vuex,CSS Pre-processors, Linter, Unit? Pick aCSS pre-processor(PostCSS, Autoprefixer andCSS Modules are supported bydefault): Stylus? Pick a linter/ formatter config: 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// fix和commit时候检查

选择单元测试

 VueCLI v3.0.0-beta.6? Please pick a preset: Manually select features? Check the features neededfor your project: Router, Vuex,CSS Pre-processors, Linter, Unit? Pick aCSS pre-processor(PostCSS, Autoprefixer andCSS Modules are supported bydefault): Stylus? Pick a linter/ formatter config: Prettier? Pick additional lint features: Lint on save? Pick a unit testing solution:(Use arrow keys)> Mocha+ Chai   Jest

她会问你 ，把babel,postcss,eslint这些配置文件放哪，这里随便选，我选择放在独立文件夹

 VueCLI v3.0.0-beta.6? Please pick a preset: Manually select features? Check the features neededfor your project: Router, Vuex,CSS Pre-processors, Linter, Unit? Pick aCSS pre-processor(PostCSS, Autoprefixer andCSS Modules are supported bydefault): Stylus? Pick a linter/ formatter config: Prettier? Pick additional lint features: Lint on save? Pick a unit testing solution: Jest? Wheredo you prefer placing configfor Babel, PostCSS, ESLint, etc.?(Use arrow keys)> In dedicated config files// 独立文件放置   Inpackage.json// 放package.json里//这两个我都放过 我觉得无所谓吧  看个人习惯

键入N不记录，如果键入Y需要输入保存名字，如第一步所看到的我保存的名字为xs-default

 VueCLI v3.0.0-beta.6? Please pick a preset: Manually select features? Check the features neededfor your project: Router, Vuex,CSS Pre-processors, Linter, Unit? Pick aCSS pre-processor(PostCSS, Autoprefixer andCSS Modules are supported bydefault): Stylus? Pick a linter/ formatter config: Prettier? Pick additional lint features: Lint on save? Pick a unit testing solution: Jest? Wheredo you prefer placing configfor Babel, PostCSS, ESLint, etc.? In dedicated config files? Savethisas a presetfor future projects?(Y/n)// 是否记录一下以便下次继续使用这套配置

确定后，等待下载依赖模块

启动项目

1. 初始完之后，进入到项目根目录： cd my-project

2. 启动项目：npm run serve 或者是yarn serve

3. 在浏览器输入http://localhost:8080就可以看到vue的欢迎界面

打包上线

1. vue-cli 也提供了打包的命令，在项目根目录下执行： npm run build

2. 执行完之后，可以看到在项目根目录下多出了一个 dist 目录，该目录下就是打包好的所有静态资源，直接部署到静态资源服务器就好了。

项目的大致目录结构

1. 现在的目录是3.0的cli看上去简洁多了，去掉了2.0 build和config等目录

2. 关于代码编写基本上与vue2的目录结构相差不大

注意：

1. 如果想要修改端口号以及webpack配置，需要你在根目录下面创建一个vue.config.js

vue.config.js完整默认配置

module.exports={/** 区分打包环境与开发环境    * process.env.NODE_ENV==='production'  (打包环境)    * process.env.NODE_ENV==='development' (开发环境)    * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',    */// 基本路径  baseUrl:'/',// 输出文件目录  outputDir:'dist',// eslint-loader 是否在保存的时候检查  lintOnSave:true,// use the full build with in-browser compiler?// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only  compiler:false,// webpack配置// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md  chainWebpack:()=>{},  configureWebpack:()=>{},//如果想要引入babel-polyfill可以这样写// configureWebpack: (config) => {//   config.entry = ["babel-polyfill", "./src/main.js"]// },// vue-loader 配置项// https://vue-loader.vuejs.org/en/options.html  vueLoader:{},// 生产环境是否生成 sourceMap 文件  productionSourceMap:true,// css相关配置  css:{// 是否使用css分离插件 ExtractTextPlugin   extract:true,// 开启 CSS source maps?   sourceMap:false,// css预设器配置项   loaderOptions:{},// 启用 CSS modules for all css / pre-processor files.   modules:false},// use thread-loader for babel & TS in production build// enabled by default if the machine has more than 1 cores  parallel:require('os').cpus().length>1,// 是否启用dll// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode  dll:false,// PWA 插件相关配置// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa  pwa:{},// webpack-dev-server 相关配置  devServer:{   open: process.platform==='darwin',   host:'127.0.0.1',   port:8080,//我个人喜好用3000   https:false,   hotOnly:false,   proxy:null,// 设置代理   before: app=>{}},// 第三方插件配置  pluginOptions:{// ...}}

后记：

1. 当你准备着手一个新的项目的时候，请事先想清楚这个项目的架构以及用到的ui组件等等

2. 比如我们的项目

1. 使用vant UI组件 2. 封装axios服务 3. 使用路由拆分（基于history） 4. 路由切换动画 。。。 反正感觉这个 我应该自己还会再加东西 因为vue.config.js里面的baseURL 感觉还没有配完  但是在上线之前 不用配vue.config.js  到时候再补吧