Vue创建项目以及Element-UI的引入

项目 创建前需要安装好：node.js

可以进入dos窗口（win+r）查看

输入： node -v(检查版本号)

npm -v (检查是否安装npm)

一. 创建项目

1. vue create 项目名

2. Manually select features 手动选择（另外2个为Vue2与Vue3的基本配置）

3. 根据需求，按空格键选择

4. 选择Vue版本

5. 如果安装了vue-router(路由)，会出现这个选择，我选yes(没有安装不会出现，不影响使用)

6.选择css预处理，选择stylus

7. 这步选择ESLint with error prevention only作为代码检查

8. 保存时就检查，选择Lint on save

9. 相关文件放在独立文件夹还是package.json,选择独立文件夹，方便读阅

10.是否记录方便下次选择，选择y在下次创建时会多出一个选项（该选项是你本次创建项目的设置）

，n则不保存，本次根据自己需要选择，我选n

11. 安装完成

12. 进入项目，cd 项目名

启动项目 ：npm run serve

13.启动成功

14.访问：http://localhost:8080/

二. Element-ui的安装配置以及使用

1. 引入Element-UI,首先安装：npm i element-ui -S

 

2.找到main.js,引入Element-UI

3.根据自己的需求使用，下面是我使用的Element-UI的示例

4.需要在App.vue加入相关内容（可以先了解一下App.vue的作用（App.vue是项目的主组件，页面入口文件 ，所有页面都在App.vue下进行切换，app.vue负责构建定义及页面组件归集。））

 

5.重新启动（vs code退出 ctrl+c 选y）,npm run serve

重新访问，点击about

Element-UI的相关组件功能如下