工作环境标准：搭建前端 Vue 开发环境
Part.A 搭建 Vue 项目
一、安装node
2、检查是否安装成功，打开终端输入以下命令，如果输出版本号，说明我们安装node环境成功
node -v
二、安装npm
1、安装node后，由于node集成了npm会默认安装npm。打开终端输入以下命令查看npm安装的版本号
npm -v
三、安装webpack
1、输入命令全局安装webpack
npm install webpack -g
2、查看是否安装成功
webpack -v
四、安装vue-cli脚手架
1、输入命令全局安装vue-cli
npm install vue-cli -g
2、查看是否安装成功（注意是大写的V）
vue -V
这些前期工作准备好之后，就可以开始建立vue项目啦，如果已经安装好以上环境，可以直接进行以下操作：
五、开始搭建vue项目
1、输入命令建立项目
vue init webpack 项目名称
比如我的项目名称是myFirstVue,就可以以下写法
vue init webpack myFirstVue
2、依次输入项目名称，项目描述，作者，每输入完一个按enter键
3、第二步后，输入y，然后接下来的三个都是输入n，也是每输入完一个按enter键
4、以上好之后，项目开始初始化，时间会慢点，慢慢等待
5、这个时候我们的vue项目就已经建立好了，可以使用vscode,来打开项目了
使用vscode终端输入命令‘’npm run dev‘’,来运行项目
6、我们能看到项目运行成功后会出来一个链接，把它复制到浏览器上，以下图片就显示我们的vue已经创建好并可以运行啦
Part.B Vue 的基本操作
一、建立新文件及该文件对应的路由
1、在项目目录的src下新建立一个pages文件夹，以后项目的页面都放该文件夹下
2、在pages下建立一个新文件，命名main.vue
3、建立文件，我们要想在页面上看到该页面内容，就需要给这个文件写对应的路由了，在vue中，每个文件都有它匹配的路由，所有在命名路由时候，为了容易理解，我习惯跟页面文件命名一样，路由我们都统一写在src/router/index.js里
4、在浏览器查看main.vue页面,因为启动页也选择了main.vue，所以它有两个路径能显示，以后建立新文件就按第一个图片路径后面加上/main就可以了，main就是路由里的path
二、使用第三方组件
这里以使用element.ui举例
1、首先在vscode打开的项目终端中输入命令
npm i element-ui -S
2、在src/main.js中引入
import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)
3、使用组件以及效果显示
补充：大多数第三方插件安装的命令都是npm install +组件名称，卸载的话就是
npm uninstall +组件名称
三、自己写组件
1、在src/compoents下面建立组件名xxx.vue
我这里以mycom为例子讲解：
2、建立好组件后，开始写组件内容
3、在src/main.js全局使用组件
4、页面使用组件
5、浏览器显示效果