vue-cli@3.x初体验之前篇-回顾vue-cli@2.x创建项目的流程

模拟实际工作中的操作，假如新开启了一个vue项目，可以先看看上篇博文中的git操作,新建空仓库vue-demo，并拉取到本地，创建本地dev分支后

1. 全局安装vue-cli

yarn global add vue-cli

// 检查是否已安装成功

vue -V

// 2.9.6

2. 使用vue init 创建项目，官方提供了6种模板,对于大多数人而言，工作中选择webpack模板

// 使用vue init 创建项目(.指当前目录)

vue init webpack .

? Generate project in current directory? (Y/n)

// 是否在当前文件下创建项目：输入y,回车

? Project name (vue-demo)

// 项目名称：不输入，直接回车

? Project description A Vue.js project

// 项目描述：不输入，直接回车

? Author (xxxxx <123456@xxx.com>)

// 作者：不输入，直接回车

? Vue build (Use arrow keys)

> Runtime + Compiler: recommended for most users

  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue

  files - render functions are required elsewhere

// 第一个是vue官方推荐大部分用户用这个，这个表示可以不基于 .vue 文件做开发，可以在运行时做编译，因为它有一个 compiler。

// 如果选第二个，min + gzip后，vuejs文件会减小6KB，因为它省略了templates模板的编译过程， 因为这个编译过程是webpack 用 vue-loader 去编译.vue 做的, 但是必须依赖 .vue文件做开发。

// 选第一个，回车

? Install vue-router? (Y/n)

// 是否安装路由：输入y, 回车

? Use ESLint to lint your code? (Y/n)

// 是否使用ESlint规范代码：输入y, 回车

? Pick an ESLint preset (Use arrow keys)

> Standard (https://github.com/standard/standard)

  Airbnb (https://github.com/airbnb/javascript)

  none (configure it yourself)

// 选择哪种 ESlint 规范预设。选择 standard 规范，回车

? Set up unit tests (Y/n)

// 是否设置单元测试：输入 n，回车

? Setup e2e tests with Nightwatch? (Y/n)

// 是否用 Nightwatch 设置 E2E测试：输入n, 回车

? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)

> Yes, use NPM

  Yes, use Yarn

  No, I will handle that myself

// 是否在创建完项目后自动安装依赖，并选择一种依赖管理工具

// 上下箭头选择 Yarn, 回车

3. 看下默认生产的目录和文件有哪些

.

|-- build                            // 编译脚本文件夹，包括所有的loaders、plugins安装配置

|   |-- build.js                        // 生产环境构建代码

|   |-- check-version.js                // 检查当前node、npm等版本

|   |-- logo.png                        // 在utils.js中被引用，用于报错时显示个默认的图标

|   |-- utils.js                        // 静态资源路径配置、样式文件的loaders配置

|   |-- vue-loader.conf.js              // vue-loader的一些配置

|   |-- webpack.base.conf.js            // webpack基本配置

|   |-- webpack.dev.conf.js             // webpack开发环境配置

|   |-- webpack.prod.conf.js            // webpack生产环境配置

|-- config                           // 生产环境与开发环境相关路径、代理、环境变量等，需要自己配置

|   |-- dev.env.js                      // 设置开发环境变量

|   |-- index.js                        // 开发和生产环境下的用户配置

|   |-- prod.env.js                     // 设置生产环境变量

|-- src                              // 项目源码

|   |-- assets                          // 资源目录

|   |   |-- logo.png

|   |-- components                      // vue公共组件目录

|   |   |-- HelloWorld.vue

|   |-- router                          // 路由配置目录

|   |   |-- index.js

|   |-- App.vue                         // 根组件

|   |-- main.js                         // 程序入口文件，加载各种公共组件

|-- static                           // 纯静态文件，比如一些图片，字体，media数据等

|   |-- .gitkeep                     // 只是为了让git能上传static空文件夹

|-- .babelrc                         // ES6语法编译配置

|-- .editorconfig                    // 定义项目的编码规范，优先级比编辑器本身的设置高

|-- .eslintignore                    // eslint规则需要忽略的文件夹或文件格式

|-- .eslintrc.js                     // eslint配置

|-- .gitignore                       // git上传需要忽略的文件格式

|-- .postcssrc.js                    // 默认支持postcss, postcss的一些配置

|-- index.html                       // 入口页面模板

|-- package.json                     // 安装包详情

|-- README.md                        // 项目说明

|-- yarn.lock                        // 锁定安装依赖的版本

.

针对这份生成的项目文件，你可能想了解更多东西（选读，暂时不理解也没关系）

参考链接：

https://www.cnblogs.com/ye-hcj/category/1139190.html

https://segmentfault.com/a/1190000012472099

https://vuejs-templates.github.io/webpack/

https://vue-loader.vuejs.org/zh/

https://cloud.tencent.com/developer/doc/1250

4. 还需要做什么？

4.1 关于eslint中的standard规范

一般情况下，vue-cli官方并不推荐我们去改build里面的配置文件，而是建议我们去修改config/index.js文件。记得以前刚开始的时候有些博客教人去改build/weppack.dev.conf.js里面关于eslint蒙层显示的问题，因为他们很不习惯eslint规则，总是写一句话就报一个错。其实这是错误的做法。而且并不建议大家把config/index.js中的useEslint设为false。

其实对于这个问题挺好解决的：

开发环境：vscode做vue项目时的一些配置

4.2 如何让其他人也可以访问你的本地开发项目

当你想让页面不仅仅是在你自己电脑上可访问，还希望可以用手机扫码访问，或者让其它同事帮忙一起调试

你可以修改 config/index.js中的dev

host: '0.0.0.0',

扫码访问的问题，可以装一个谷歌扩展插件，比如草料二维码

5. 踩坑记录

...这些天总结上面的文件详解有点伤,暂时没想起来其它曾经踩过的坑了，发现以前的遇到问题了都是随手一百度，想想有些好像是让我去改build里面的配置...等过几天上了vue-cli@3.x再总结吧，vue-cli@2.x的一些坑说不定到3.x之后就没有了呢。哈哈