Vue+Element安装

npm安装vue

首先安装node.js安装好之后建立文件夹，用vs code打开终端

由于国内npm安装较慢，这里使用淘宝的镜像进行安装

我们可以使用淘宝的cnpm来代替默认的npm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成cnpm后安装vue

cnpm install vue

命令行工具

// 全局安装 vue-cli
cnpm install --global vue-cli
// 创建一个基于 webpack 模板的新项目
vue init webpack Finance
// 这里需要进行一些配置，项目名称、说明、作者等信息

进入项目，安装并运行：

cd Finance
cnpm run dev

ok,第一部分完成！接下来引用Element的样式进行开发。

引入Element

这边我用npm安装时一直报错，提示用管理员命令运行，可是依旧失败，无奈，还是用cnpm安装,这里我是安装的2.0.3的版本

cnpm install element-ui@2.0.3 -S

接下来在main.js文件中引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

测试一下，找到HelloWorld.vue,修改下内容

<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary"icon="el-icon-search">搜索</el-button>

npm run dev运行看下效果

elementdemo.png

至此，我们的vue+element的粗略框架就搭建好了。