查看网站dns班级优化大师网页版
一、准备工作
1. 首先需要下载nodejs，安装后打开命令窗口可以使用npm包管理工具
2. npm集成在node中的，所以直接输入npm-v查看npm的版本信息
3.安装Vue CLI （使用npm全局安装Vue CLI工具，确保已安装 Node.js环境。）
npm install -g @vue/cli或 cnpm install -g @vue/cli安装成功后，命令行输入 vue -V 可以查看版本号
二、创建Vue项目
2.1通过Vue CLI创建新项目，选择默认配置或手动配置。
（这里我选手动配置）
immoc-datav-report-dev为项目名
vue create immoc-datav-report-dev 
这样项目就已经初始化完毕了
tips
如果在安装过程中，出现报错，可能是因为npm在国内安装比较慢，推荐使用 淘宝镜像 （cnpm ）进行安装 ，输入该命令，回车，这样安装就会很快
vue create immoc-datav-report-dev --registry=https://registry.npm.taobao.org接下来可以使用 npm run serve 运行项目，浏览器查看效果
此外
我们可以在APP.Vue 文件中，做一下全局样式配置（根据自己的需求配置哈，不需要的话可以不配置）
<style lang="scss">
html,
body,
#app {margin: 0;padding: 0;width: 100%;height: 100%;
}
</style>
三、安装Element UI
两种方式安装
官网：Element - The world's most popular Vue UI framework
1 . 通过npm或yarn安装Element UI库。
npm install element-ui --save1.1 全局引入Element UI
在项目的 main.js 文件中导入Element UI并注册。
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)1.1.1 按需引入Element UI组件（可选）
若需优化体积，可安装babel插件并按需引入组件。
npm install babel-plugin-component -D修改babel.config.js文件：
module.exports = {plugins: [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]
}1.1.2 在组件中单独引入所需组件：
import { Button, Select } from 'element-ui'
Vue.use(Button)
Vue.use(Select)1.1.3 运行项目
启动开发服务器查看效果。
npm run serve1.1.4 测试Element UI组件
在任意组件模板中使用Element UI组件验证是否成功引入。
<el-button type="primary">测试按钮</el-button>2.通过下载插件安装Element UI 库
输入命令
vue add element
出现这个 Still proceed 输入y 就可以了，这是因为我们项目初始化之后，有文件修改，没有进行commit提交，出现的提示哈。
然后会安装一个 vue-cli-plug-element 插件，这个插件会帮我们完成一个Element UI 的安装和引入
成功安装后 会出现一个提示，是全量引入 还是 按需引入
全量引入，体积较大，所以我们选择 按需引入 Improt on demand，选择需要加载的文字 ：zh-cn
安装成功之后，APP.Vue 页面发生了一些变化，多了一些代码，这个是插件它帮我们写了一些ELment 样例测试
总结
到这里我们就已经初步搭建完一个简单的 vue+Element UI的项目了，可以按照需求进行页面开发咯