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

时间 2019-12-05

标签 vue cli@3.x cli 体验以前回顾 cli@2.x 建立项目流程繁體版

原文原文链接

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

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                        // 锁定安装依赖的版本
.

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

参考连接：html

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

https://segmentfault.com/a/1190000012472099java

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

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

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

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项目时的一些配置github

4.2 如何让其余人也能够访问你的本地开发项目

当你想让页面不单单是在你本身电脑上可访问，还但愿能够用手机扫码访问，或者让其它同事帮忙一块儿调试
你能够修改 config/index.js中的devweb

host: '0.0.0.0',

扫码访问的问题，能够装一个谷歌扩展插件，好比草料二维码

5. 踩坑记录

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