# 创建项目 ## 创建项目脚手架 ``` 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) ~~~