# 創建項目 ## 創建項目腳手架 ``` vue create cms-portal-iview ``` 在創建過程中選擇 `Manually select features`選項， ``` PS D:\learning> vue create cms-portal-iview Vue CLI v4.5.12 ? Please pick a preset: Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) > Manually select features ``` 進一步選擇打星號的選項， ``` Vue CLI v4.5.12 ? Please pick a preset: Manually select features ? Check the features needed for your project: (*) Choose Vue version (*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support (*) Router (*) Vuex (*) CSS Pre-processors >( ) Linter / Formatter ( ) Unit Testing ( ) E2E Testing ``` 最后選擇Vue的版本`2.x` ``` Vue CLI v4.5.12 ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors ? Choose a version of Vue.js that you want to start the project with (Use arrow keys) > 2.x 3.x (Preview) ``` 后續步驟需要選擇Saas作為CSS的編譯器。 生成的依賴包文件`package.json` ~~~json { "name": "cms-portal-iview", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" }, "dependencies": { "core-js": "^3.6.5", "vue": "^2.6.11", "vue-router": "^3.2.0", "vuex": "^3.4.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-service": "~4.5.0", "sass": "^1.32.8", "sass-loader": "^10.1.1", "vue-template-compiler": "^2.6.11" } } ~~~ ## 添加擴展組件依賴 進入項目目錄 ~~~ cd create cms-portal-iview ~~~ 安裝依賴模塊 ~~~ cnpm install ~~~ 執行命令 ~~~ npm run serve ~~~ 一切正常，能夠在瀏覽器中看到如下界面  ## 添加iView組件庫的支持 ~~~ cnpm install view-design --save ~~~ ## 最后安裝iview-loader插件，實現view-design組件的自動加載 ~~~ cnpm install iview-loader -D ~~~ 最終的package.json文件內容如下： ``` { "name": "cms-portal-iview", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" }, "dependencies": { "core-js": "^3.6.5", "view-design": "^4.5.0", "vue": "^2.6.11", "vue-router": "^3.2.0", "vuex": "^3.4.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-service": "~4.5.0", "iview-loader": "^1.3.0", "sass": "^1.32.8", "sass-loader": "^10.1.1", "vue-template-compiler": "^2.6.11" } } ``` ## 技能提升 * 使用 npm install -g npm可以更新npm本身 * 使用npm update可以更新項目的依賴包，但是必須在項目的根目錄下執行 * 在大部分時候建議使用cnpm命令代替npm命令，不僅速度快，還能解決很多依賴導致包安裝失敗問題。 npm和cnpm的常用命令參數 ~~~ -g：全局安裝。 將會安裝在C:\Users\Administrator\AppData\Roaming\npm，并且寫入系統環境變量;非全局安裝：將會安裝在當前定位目錄;全局安裝可以通過命令行任何地方調用它，本地安裝將安裝在定位目錄的node_modules文件夾下，通過要求調用; –save：將保存至的package.json（的package.json是的NodeJS項目配置文件dependencies節點） -dev;：保存至的package.json的devDependencies節點，不指定-dev將保存至依賴節點 (dependencies) ~~~