vue+TS（CLI3）

1。用CLI3建立項目 

查看當前CLI的版本，若是沒有安裝CLI3的  使用npm install --global vue-cli來安裝CLI

安裝好CLI 能夠建立項目了 使用vue create project （能夠選擇默認的配置  也能夠手動配置  ）

手動配置相關 翻譯：

選擇css預處理，這裏我選擇stylus

? Please pick a preset: Manually select features ? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): > SCSS/SASS  LESS  Stylus

選擇ESLint + Prettier

? Please pick a preset: Manually select features ? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus ? Pick a linter / formatter config: (Use arrow keys) > ESLint with error prevention only  ESLint + Airbnb config  ESLint + Standard config  ESLint + Prettier

選擇ESLint + Prettier

? Please pick a preset: Manually select features ? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus ? Pick a linter / formatter config: (Use arrow keys) > ESLint with error prevention only  ESLint + Airbnb config  ESLint + Standard config  ESLint + Prettier

選擇單元測試

Vue CLI v3.0.0-beta.6 ? Please pick a preset: Manually select features ? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Pick a unit testing solution: (Use arrow keys) > Mocha + Chai  Jest 

她會問你 ，把babel,postcss,eslint這些配置文件放哪，這裏隨便選，我選擇放在獨立文件夾

Vue CLI v3.0.0-beta.6 ? Please pick a preset: Manually select features ? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Pick a unit testing solution: Jest ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) > In dedicated config files // 獨立文件放置  In package.json // 放package.json裏 

鍵入N不記錄，若是鍵入Y須要輸入保存名字，如第一步所看到的我保存的名字爲xs-default

Vue CLI v3.0.0-beta.6 ? Please pick a preset: Manually select features ? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Pick a unit testing solution: Jest ? 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) // 是否記錄一下以便下次繼續使用這套配置

 

 

 這就算建立完成了  能夠看到多了一個project的文件夾  

而後 運行剛剛建立的項目

運行結果：