基於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)
選擇否