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
当咱们在控制台输出下面命令之后稍等一会就会看到浏览器关上了一个新的页面，当然了，咱们须要在电脑中找到咱们的我的项目，导入进去。

//以下操纵 基本上 和下面是一样的!
本期的教程到了这里就完结啦!是不是很棒!很完满!让咱们一起致力走向巅峰!