關(guān)于舊版本
Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli凉夯。 如果你已經(jīng)全局安裝了舊版本的 vue-cli (1.x 或 2.x)采幌，你需要先>通過(guò) npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。
文章結(jié)構(gòu)
- 安裝
- 檢查版本
- 初始化項(xiàng)目
- 運(yùn)行
- 項(xiàng)目目錄
- 自定義配置
一征绎、安裝
npm install -g @vue/cli
二磨取、檢查版本
vue --version
三、初始化項(xiàng)目
vue create hello-world
警告
如果你在 Windows 上通過(guò) minTTY 使用 Git Bash凫岖，交互提示符并不工作逢净。你必須通過(guò) winpty vue.cmd >create hello-world 啟動(dòng)這個(gè)命令。
1甥雕、選擇 Manually select features
Vue CLI v3.1.3
? Please pick a preset: (Use arrow keys)
> default (babel, eslint) //默認(rèn)（安裝bable着饥、eslint）
Manually select features //自定義
2、選擇自定義配置
- 方向鍵上下移動(dòng)呵哨，空格選中轨奄，Enter確定
Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert s
election)
>(*) Babel //ES6轉(zhuǎn)ES5
( ) TypeScript //JS超集
( ) Progressive Web App (PWA) Support //漸進(jìn)式Web應(yīng)用
(*) Router //路由
( ) Vuex //狀態(tài)管理
(*) CSS Pre-processors //CSS預(yù)處理
(*) Linter / Formatter //規(guī)范類型
( ) Unit Testing //測(cè)試
( ) E2E Testing //測(cè)試
3、是否使用history模式的路由
Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
4挨务、CSS預(yù)處理器選擇
Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? 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 ke
ys)
> Sass/SCSS
Less
Stylus
5、選擇哪個(gè)ESLint自動(dòng)化代碼格式化檢測(cè)
Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? 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
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
6丁侄、選擇語(yǔ)法檢查的時(shí)期
Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? 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
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save //語(yǔ)法檢查配置文件保存時(shí)檢查
( ) Lint and fix on commit //文件提交時(shí)檢查
7鸿摇、配置文件的存放位置（推薦獨(dú)立放置配置文件）
Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? 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
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files //放獨(dú)立文件放置
In package.json //放package.json里
8劈猿、是否保存此預(yù)設(shè)(選擇yes的話下次就可以不用進(jìn)行配置)
Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? 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
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)
9、等待文件下載完
Vue CLI v3.1.3
? Creating project in C:\Users\sifu\Desktop\hello-world.
?? Initializing git repository...
? Installing CLI plugins. This might take a while...
> yorkie@2.0.0 install C:\Users\sifu\Desktop\hello-world\node_modules\yorkie
> node bin/install.js
setting up Git hooks
done
added 1109 packages from 737 contributors in 77.23s
?? Invoking generators...
?? Installing additional dependencies...
> node-sass@4.10.0 install C:\Users\sifu\Desktop\hello-world\node_modules\node-sass
> node scripts/install.js
Cached binary found at C:\Users\sifu\AppData\Roaming\npm-cache\node-sass\4.10.0\win32-x64-64_binding.node
> node-sass@4.10.0 postinstall C:\Users\sifu\Desktop\hello-world\node_modules\node-sass
> node scripts/build.js
Binary found at C:\Users\sifu\Desktop\hello-world\node_modules\node-sass\vendor\win32-x64-64\binding.node
Testing binary
Binary is fine
added 151 packages from 104 contributors, updated 2 packages and moved 5 packages in 36.792s
? Running completion hooks...
?? Generating README.md...
?? Successfully created project hello-world.
?? Get started with the following commands:
$ cd hello-world
$ npm run serve
四、運(yùn)行
cd hello-world
npm run serve
瀏覽器訪問(wèn)：http://localhost:8080/仗颈，效果如下：
五揽乱、項(xiàng)目目錄
image.png
相比于2.0，文件目錄結(jié)構(gòu)簡(jiǎn)潔不少损拢，少的部分都是一些配置文件撒犀，那么以前的配置我們想自定義配置怎么辦呢？
五或舞、自定義配置
1、在項(xiàng)目根目錄下創(chuàng)建vue.config.js文件
image.png
2胆筒、vue.config.js基本常用配置（其他的具體看文檔）
module.exports = {
devServer: {
port: 8888, // 端口號(hào)
host: 'localhost',
https: false,
open: false // 配置是否自動(dòng)啟動(dòng)瀏覽器
}
}
