使用vscode搭建vue项目并引用element-ui

参考自：https://blog.csdn.net/lifeisaclimb/article/details/105632885

1.环境准备

Visual studio code，nodejs，vue-cli，yarn

2.新建项目

1)打开Visual studio code,打开一个你想要创建项目的文件夹

2）打开集成终端如下图所示或者使用快捷键

3）在终端中输入如下命令新建项目

vue init webpack projectName

projectName为你想要取的项目名称，需要注意的是项目的名称不能大写，不然会报错。

4）在新建项目过程中需要配置下面参数

a)第一项：项目名称，可以直接按enter键

b)第二项：项目描述一个Vue.js，可以直接按enter键

c)第三项：作者名称，输入作者名称：如下图所示

d) 第四项：输入作者名称后按enter键后显示如下图选项，使用上下箭头选择，通常默认选择第一项，按enter选中

之后配置如下选项

e)第五项：是否安装Vue路由,输入Y/N

f)第六项：使用 ESLint 到你的代码;ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。

g)第七项：选择一个预置ESLint，使用上下箭头选择

h)第八项：设置单元测 Y/N

i)第九项：设置端到端测试 Y/N
上述选项设置后选择，选择包管理工具如下所示（npm/yarn）
创建成功后最后显示如下

3.按照提示输入命令运行项目

cd third （third是刚才输入的project name）

npm run dev

使用浏览器打开地址http://localhost:8080/ 可以打开默认的页面

如果你本机的8080端口占用了，可以修改 projectName/config/index.js的端口配置

4.引用element-ui

a) 第一步：安装element-ui，运行npm i element-ui -S

安装前注意把npm/yarn设置镜像服务器（因为大部分内容要去外网下载，直连比较慢）

NPM设置成淘宝镜像

npm config set registry http://registry.npm.taobao.org/ -g

yarn设置成淘宝镜像

yarn config set registry http://registry.npm.taobao.org/ -g

b) 第二步：在项目里面引用了element-ui，打开src目录下的main.js

5.运行一个使用element-ui的网页

1）在src/components下创建test.vue文件，写上element-ui官网里给出的代码
2）在src/router/index.js文件里进行路由配置
3）在浏览器输入http://localhost:8080/#/test进行访问刚才创建的test.vue文件