模拟实际工作中的操作，假如新开启了一个vue项目，可以先看看上篇博文中的git操作,新建空仓库vue-demo，并拉取到本地，创建本地dev分支后
1. 全局安装vue-cli
yarn global add vue-cli
// 检查是否已安装成功
vue -V
// 2.9.62. 使用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 // 锁定安装依赖的版本
.针对这份生成的项目文件，你可能想了解更多东西（选读，暂时不理解也没关系）
- [email protected]目录下build.js文件详解
- [email protected]目录下check-version.js文件详解
- [email protected]目录下utils.js文件详解
- [email protected]目录下vue-loader.conf.js文件详解
- [email protected]目录下webpack.base.conf.js文件详解
- [email protected]目录下webpack.dev.conf.js文件详解
- [email protected]目录下webpack.prod.conf.js文件详解
- [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规范
一般情况下，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之后就没有了呢。哈哈
原文地址：https://www.cnblogs.com/hezhi/p/10205754.html