导语： 这是一个流程，这个流程使用 vue-cli 创建 vue2 项目，并且演示了 element 组件库的引入与配置
1、安装 node 与 vue-cli（一次安装即可）
node：node -v --> v16.17.0
vue-cli：vue --version --> @vue/cli 5.0.8
2、打开终端：桌面 -> shift+鼠标右键 -> 打开powershell窗口
3、创建一个新的 vue 项目
vue create xxx项目名
4、通过上下方向键选择对应配置，然后回车，这里选择自定义
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint) 默认vue3
Default ([Vue 2] babel, eslint) 默认vue2
Manually select features 自定义配置
5、选择 资源配置项，这里选择 Babel、Router、Vuex
? 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, and
<enter> to proceed)
>(*) Babel JS语法编辑器（必选）
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router 路由（必选）
( ) Vuex 状态管理器
( ) CSS Pre-processors css处理器
(*) Linter / Formatter 代码检查
( ) Unit Testing
( ) E2E Testing
6、选择 vue 版本，这里选择vue2
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
2.x
7、路径模式选择，这里可以不用管，直接输入 no/n
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
8、代码检查，选标准的就行，方向键切换，空格键选择然后回车；这里选择 ESLint + Standard config 标准
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
9、代码检查时间，方向键切换，空格键选择然后回车；这里选择保存时检查
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
proceed)
>(*) Lint on save 保存时检查
( ) Lint and fix on commit 提交时检查
10、第三方文件存在的方式：1.独立的文件 2.综合的；这里选独立的
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files 独立的文件
In package.json 综合的
11、是否保存本次配置信息（保存预设）； 这里如果选择保存的话，就要输入名字，默认就是文件夹的名字，下次配置的时候就会显示这个文件配置的选项就像上面的一样，在配置的时候会多出来一个；这里选择否
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n
12、创建成功；返回桌面把新建的项目拉入 vscode 编译器
13、安装 element
npm i element-ui
14、在src/main.js里面完整引入element-ui
// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 引入elemetn-ui组件库
import ElementUI from 'element-ui';
// 引入element-ui全部css
import 'element-ui/lib/theme-chalk/index.css';
// 关闭Vue的生产提示
Vue.config.productionTip=false
// 使用element
Vue.use(ElementUI)
// 创建vm
const vm=new Vue({
el:'#app',
render:h=>h(App),
})
15、在 src/App.vue 下使用 element
<el-button type="success">Success</el-button>
16、运行项目，查看效果
npm run serve
