VUE基础之项目构建
写在前面
前端学习无论如何都绕不过VUE这个山头，那么现阶段大火的VUE到底是何方神圣呢？
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
vue的使用可以根据我们的需要，选择
1）直接引入vue.js文件，一般主要用于初级用户和小型项目
2）构建一个大型项目
今天我们主要介绍如何构建一个VUE项目模板。
构建流程
vue的安装环境
首先，保证你的电脑上安装了node.js，然后使用Npm安装Vue.js，如果你安装了淘宝的镜像就可以使用命令cnpm，更快捷；若没有，npm一样安装，更稳定。
然后我们挑选一个相应的构建工具。官方推荐的构建工具主要有webpack和browserify，这里我推荐大家使用webpack进行构建。
除了构建工具，我们还需要用到构建方法，比如我们可以使用vue-cli脚手架来自动生成vue项目的基础目录文件，或是从零开始进行自定义构建（推荐）。
使用vue-cli脚手架构建vue项目：
cnpm install -g @vue/cli ---- 安装脚手架
vue create myapp / vue ui ---- 创建项目（myapp为项目名称，可根据个人需求命名 / vue create myapp为控制台命令安装， vue ui为可视化安装）
以上两种命令二选一即可生成一个简单的vue项目（前提安装node.js）这里使用的是脚手架 3 的版本 — webpack4
自定义构建vue项目
相比vue-cli构建，自定义构建就显得灵活得多，但是它需要你了解构建的步骤和原理，要求也就随之提高了。自定义构建分为以下几步，首先打开控制台命令或者打开编辑器终端进入目标文件夹：
输入 vue create myapp 后会出现以下选择配置信息：
1）
Vue CLI v3.11.0 //脚手架版本
? Please pick a preset: //请选择一个预设
default (babel, eslint) //默认选项
> Manually select features //自定义选项（我们选择自定义选项，选择好后按enter键进入下一步）
2）
Vue CLI v3.11.0
? Please pick a preset: Manually select features //第一个预设
? Check the features needed for your project: (Press to select, to toggle all, to invert selection) //检查项目所需的功能
>(*) Babel //引入babel插件，将es6转成es5
( ) TypeScript //ts脚本语言 js（JavaScript）的升级版，需要就按空格键选择
( ) Progressive Web App (PWA) Support //渐进式Web应用程序（PWA）支持
( ) Router //路由管理器
( ) Vuex //状态管理
( ) CSS Pre-processors //CSS样式预处理
(*) Linter / Formatter //自动化代码格式化检测
( ) Unit Testing //测试方式
( ) E2E Testing //测试方式
3）
这里你可以自由选择用哪些配置，按上下键选择哪一个，按空格键确定，所有的都选择好后，按enter键进行下一步
Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press to select, to toggle all, to invert selection)
>(*) Babel
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) //是否记录路由使用的历史记录（对路由器使用历史记录模式）
4）
Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press to select, to toggle all, to invert selection)
>(*) Babel
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) //选择一个CSS预处理器
Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)
Less
Stylus
5）
Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press to select, to toggle all, to invert selection)
>(*) Babel
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config:
ESLint with error prevention only //仅错误预防
ESLint + Airbnb config //Airbnb配置
> ESLint + Standard config //标准配置
ESLint + Prettier
上面这个是问你选择哪个自动化代码格式化检测，配合vscode编辑器的
ESLint + Standard config插件
6）
Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press to select, to toggle all, to invert selection)
>(*) Babel
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press to select, to toggle all, to invert selection)
>(*) Lint on save //保存时检查
( ) Lint and fix on commit (requires Git) //提交时检查
这里第一个选项是问你是否保存刚才的配置，选择确定后你下次再创建新项目就有你以前选择的配置了，不用重新再配置一遍了
7）
Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press to select, to toggle all, to invert selection)
>(*) Babel
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press to select, to toggle all, to invert selection)Lint on save
? Pick a unit testing solution: (Use arrow keys) //选择单元测试方案
> Mocha + Chai //只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成
Jest
上面这个是问你选择哪个选择单元测试方案
8）
Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press to select, to toggle all, to invert selection)
>(*) Babel
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press to select, to toggle all, to invert selection)Lint on save
? Pick a unit testing solution: Mocha
? Pick a E2E testing solution: (Use arrow keys) //端对端测试（用户界面测试）
> Cypress (Chrome only) //e2e测试工具
Nightwatch (Selenium-based) //e2e测试工具（中文名‘守夜者’）
上面这个是问你选择哪个e2e测试工具
9）
Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press to select, to toggle all, to invert selection)
>(*) Babel
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press to select, to toggle all, to invert selection)Lint on save
? Pick a unit testing solution: Mocha
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
In dedicated config files //放独立文件放置
> In package.json //放package.json里
上边这俩意思是，babel,postcss,eslint,etc这些配置文件你想存放在哪？
第一个是：放独立文件放置
第二个是：放package.json里
10）
Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press to select, to toggle all, to invert selection)
>(*) Babel
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press to select, to toggle all, to invert selection)Lint on save
? Pick a unit testing solution: Mocha
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N)
上边问你是否将以上这些将此保存为未来项目的预配置吗？
全部配置完，按enter开始安装。
A few monments later(视你的网速而定)
项目构建成功。
打开的文件目录可以看到：
node_modules // 项目需要使用的依赖文件
public // 静态资源文件
src // 我们的主场
tests // 测试
.browserslistrc // 浏览器版本的设置 使用最新的版本
.editorconfig // 编辑器的设置
.eslintrc.js // 代码格式校验
.gitignore // git的忽略文件
babel.config.js // babel配置文件
cypress.json // 测试的插件配置
package.json // 项目的一个描述的文件
postcss.config.js // css的配置
README.md //项目描述文件
打开src目录可以看到：
src
assets // 静态资源的文件
components // 项目中需要的组件
views // 应用中的页面 （路由找页面，页面找组件）
App.vue // 总页面
main.js // 入口逻辑文件 --- 视图绑定到元素上
registerServiceWorker.js // 上线执行的一个文件
router.js // 路由
store.js // 状态管理器
最后修改一下命令：
修改package.json文件里面的内容（此内容可修改可不改）
"scripts": {
"serve": "vue-cli-service serve",
**"dev": "cnpm run serve",**
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
不修改可以使用 cnpm/npm run serve 运行项目
修改后可以使用cnpm/npm run dev运行项目
启动项目
进入项目，安装并运行：
cd my-project //进入你的项目文件夹
cnpm/npm run serve //刚刚没修改的话使用这条命令运行项目
cnpm/npm run dev //修改后可以使用这条命令运行项目
App running at:
- Local: http://localhost:8080/
- Network: http://10.11.62.27:8080/
成功执行以上命令后访问 http://localhost:8080/, VSCode可以ctrl+单击终端里的网址，不行就手动进入：）