基於vue cli 3.0建立前端項目並安裝cube-ui

前提條件：
安裝node.js。
國內的開發者最好先配置淘寶鏡像。
以後用cnpm來代替npm命令。

項目建立過程：
打開cmd，輸入命令進入目標工做空間，以本機項目爲例：
cd /d d:
cd D:\workplace
輸入全局安裝vuecli的命令：cnpm install -g @vue/cli
輸入檢查vue版本的命令：vue --version
若是版本爲3.0+，則繼續。
輸入建立項目的命令：vue create vue-sell-cube

會看到
? Your connection to the default npm registry seems to be slow.
Use https://registry.npm.taobao.org for faster installation? (Y/n)
就是問你要不要用淘寶鏡像，國內的開發者輸入y。

下一步配置預設，會看到可選擇的界面
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
Manually select features
按↓鍵選擇手動設置，變成下圖
? Please pick a preset:
default (babel, eslint)
> Manually select features

按回車進入設置，會看到可選擇的界面，按空格勾選或取消勾選。
? 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 selection)
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
>( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
咱們要選中css pre-processors，babel，linter這三個預設

回車進入下一步選擇css預處理器
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS
Less
> Stylus
選擇stylus

選擇eslint規則
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
> ESLint + Standard config
ESLint + Prettier
選擇標準配置

保存時lint仍是提交時lint
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
( ) Lint and fix on commit (requires Git)
選擇保存時

把預設配置存入相應文件仍是放入package.json
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
選擇相應文件

是否保存預設配置，保存下次就不會再問你配置預設了
? Save this as a preset for future projects? (y/N)
輸入n，不保存。

等待自動建立完畢。

進入建立好的項目文件夾，輸入命令cd vue-sell-cube
測試是否正常可運行，輸入npm run serve。打開瀏覽器輸入（默認的端口）http://localhost:8080/
出現
Welcome to Your Vue.js App
For a guide and recipes on how to configure / customize this project,
check out the vue-cli documentation.
說明項目已經建立成功了。

 

cube-ui安裝

輸入命令安裝 ：vue add cube-ui

是否進行後編譯
? Use post-compile? (Y/n)
選擇是，輸入y

導入類型
? Import type (Use arrow keys)
> partly, import component on demand, which makes the size of imported code lighter
fully, import all the components
選擇部分引用。

自定義主題？
? Custom theme? (Y/n)
選擇是

使用rem？
? Use rem layout? (y/N)
選擇否

使用vw？ ? Use vw layout? (y/N) 選擇否