1. 程式人生 > >基於vue cli 3.0建立前端專案並安裝cube-ui

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