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的文件夾
然后 運行剛剛創建的項目
運行結果：
