共计 3293 个字符，预计需要花费 9 分钟才能阅读完成。
vue 脚手架装置以及创立我的项目
1. 电脑系统 windows10 专业版
2. 在开发的过程中, 咱们会常常应用到 vue 脚手架进行开发, 当初来教大家如何装置脚手架, 并装置指定的版本
3. 先卸载 vue 脚手架 npm uninstall -g @vue/cli 全局卸载 vue 脚手架
4. 当初装置 指定的版本 3 npm install -g @vue/cli@3 默认会装置 vue-cli3 的最高版本
5.vue-cli3.0 创立办法的命令是不一样的，须要和 vue-cli2.0 进行辨别，vue-cli3.0 应用的命令是：
vue create 项目名称
// 当然也能够通过可视化工具进行创立 : cmd 而后 输出 vue ui 输出完命令当前在窗口中能够看到无关我的项目的一些配置选项。
? Please pick a preset: (Use arrow keys)
default (babel, eslint) // 默认选项
Manually select features // 手动抉择性能
如果抉择 default 则会间接创立我的项目，创立我的项目包含 babeleslin 这些工具，比方 Router/Vuex 等其余依赖须要本人手动装置。
如果抉择 Manually select features(手动装置)则会进入下一步选项：（这里举荐大家进行手动配置）
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, to toggle all, to invert selection)
() Babel // 代码编译
() TypeScript // ts
() Progressive Web App (PWA) Support // 反对渐进式网页应用程序
() Router // vue 路由
() Vuex // 状态管理模式
() CSS Pre-processors // css 预处理
() Linter / Formatter // 代码格调、格局校验
() Unit Testing // 单元测试
() E2E Testing // 端对端测试
个别我的项目开发只须要抉择 Babel、Router、Vuex 就足够了。
上面简略说一下抉择不同的配置项会呈现的不同的状况：
TypeScript
Use class-style component syntax?
这里询问的是是否应用 class 格调的组件语法，如果在我的项目中想要放弃应用 TypeScript 的 class 格调的话，倡议大家抉择 y。
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)
应用 Babel 与 TypeScript 一起用于自动检测的填充? 这里肯定要抉择 y
Router
Use history mode for router? (Requires proper server setup for index fallback in production)
路由是否应用 history 模式？如果我的项目中存在要求就应用 history(即:y)，然而个别还是举荐大家应用 hash 模式，毕竟 history 模式须要依赖运维。
CSS Pre-processors css
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
抉择一种 CSS 预处理类型，这个须要依据各个我的项目的要求应用那种 css 编译解决了。
Linter / Formatter
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only // 只进行报错揭示
ESLint + Airbnb config // 不谨严模式
ESLint + Standard config // 失常模式
ESLint + Prettier // 严格模式
TSLint (deprecated) // TypeScript 格局验证工具
TSLint 只有在抉择 TypeScript 时才会存在。
? Pick additional lint features: (Press <space> to select, to toggle all, to invert selection)
(*) Lint on save // 保留时检测
() Lint and fix on commit // 修复和提交时检测
抉择校验机会，个别都会抉择保留时校验，好及时做出调整，如果代码格调和 ESLint 校验格调差不多的话，或者比拟自信比拟帅的状况下，能够思考抉择提交时校验。气宇轩昂的我，抉择了第一项。
Unit Testing
? Pick a unit testing solution: (Use arrow keys)
Mocha + Chai
Jest
抉择单元测试解决方案，广泛用到最多的时 Mocha + chai，这里就不多说了。
E2E Testing E2E（End To End）
? Pick a E2E testing solution: (Use arrow keys)
Cypress (Chrome only)
Nightwatch (WebDriver-based)
抉择端对端测试的类型。
额定选项
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
In dedicated config files // 寄存在专用配置文件中
In package.json // 寄存在 package.json 中
抉择 Babel,PostCSS, ESLint 等自定义配置的寄存地位。这里倡议大家抉择第一个，
Save this as a preset for future projects? (y/N)
是否保留以后抉择的配置项，如果以后配置是常常用到的配置，倡议抉择 y 存储一下以后配置项。如果只是长期应用的话就不须要存储了，依据本人状况而定啦。
抉择 n 之后则会间接开始创立我的项目了，抉择 y 之后则会输出一个存储以后配置项的名称:
? Save preset as:
下次再创立我的项目的时候就会看到，本人所存储的这个名字啦。
我的项目依赖
Vue-cli3.0 能够应用 npm 装置所须要的依赖，出了这个他还提供了一个其余的办法 vue add 办法。
// npm
npm install –save axios
// vue
vue add axioa
既然能够应用 npm 装置为什么还要应用 vue add 装置呢？官网文档中是这样阐明：
Vue CLI 应用了一套基于插件的架构。如果你查阅一个新创建我的项目的 package.json，就会发现依赖都是以 @vue/cli-plugin- 结尾的。插件能够批改 webpack 的外部配置，也能够向 vue-cli-service 注入命令。在我的项目创立的过程中，绝大部分列出的个性都是通过插件来实现的。
基于插件的架构使得 Vue CLI 灵便且可扩大。
通过下面的阐明能够看出 vue-cli 想要让脚手架工具变的更加的灵便，所以为咱们增加了 vue-cli 的插件，这些插件在装置时会批改 webpack 外面配置(不是所有插件)，而且还会在现有我的项目外面增加一些曾经写好的范例文件(当然也是个别)，然而有一点须要留神的是，这些命令会更改现有我的项目外面的内容。尤其是在应用 vue add router 或是 vue add vuex 成果还是蛮显著的。
然而应用 npm install 来装置的我的项目基本就不会帮咱们做这些事件。尽管当初晓得了 vue 官网提供了很多插件，然而应该从哪里看到呢？人性化的 vue 怎么可能会疏忽这个问题呢？
vue ui
当咱们在控制台输出下面命令之后稍等一会就会看到浏览器关上了一个新的页面，当然了，咱们须要在电脑中找到咱们的我的项目，导入进去。
// 以下操纵 基本上 和下面是一样的!
本期的教程到了这里就完结啦! 是不是很棒! 很完满! 让咱们一起致力走向巅峰!
