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

Posted 2021-01-31 hezhi

模拟实际工作中的操作，假如新开启了一个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 <[email protected]>)
// 作者：不输入，直接回车
? 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                        // 锁定安装依赖的版本
.

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

1. [email protected]目录下build.js文件详解
2. [email protected]目录下check-version.js文件详解
3. [email protected]目录下utils.js文件详解
4. [email protected]目录下vue-loader.conf.js文件详解
5. [email protected]目录下webpack.base.conf.js文件详解
6. [email protected]目录下webpack.dev.conf.js文件详解
7. [email protected]目录下webpack.prod.conf.js文件详解
8. [email protected]目录下index.js文件详解

参考链接：

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规范

• standard中文介绍
• 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里面的配置...等过几天上了[email protected]再总结吧，[email protected]的一些坑说不定到3.x之后就没有了呢。哈哈