Vue + Element UI项目初始化

1.安装相关组件

1.1安装Node

检查本地是否安装node 

node -v

 

若是没有安装，从Node官网下载

CentOS安装 

curl -sL https://rpm.nodesource.com/setup_10.x | bash -

yum install -y nodejs

  

1.2安装npm

npm -v

若是没有安装：使用该指令安装： 

npm install -g npm

1.3安装webpack

 webpack -v

若是没有安装，经过如下指令安装：

 npm install webpack -g

若是缺失相关组件，选择“y”进行安装。

1.4vue脚手架

 vue-cli -v

若是没有安装，经过如下指令安装：

 npm install vue-cli -g

 

2.建立Vue项目

选择在项目建立的文件夹打开powershell，运行该指令 

vue init webapck ElementDemo

 

若是出现下面的错误，将项目的名称换为全小写便可（不可有汉字）

 以后全选择默认便可

可能项目的建立会出现一些错误，不要紧，出现最后的初始化完成便可

运行该命令完成组件安装

npm install

运行该命令启动程序

npm start 或 npm run dev

 运行结果以下图

 

3.添加Element

Element中文站点

Element Unpkg下载

此处咱们须要下载 /lib/index.js 以及 /lib/theme-chalk/index.css 两个文件

3.1添加Element引用

可是此处咱们使用另一种方法，修改package.json文件

运行该命令完成组件安装

npm install

3.2应用Element UI

添加以下的引用，将Element全局引用到Vue框架

在App.vue中添加一下几行代码

保存文件，页面会自动刷新（此时powershell仍需在运行状态）

最下方出现一排咱们设置的按钮且已经应用了Element的样式，说明Element添加成功

 

4.常见错误

若是频繁出现文件缺失，先安装cnpm

 

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

 

而后将npm install指令替换为cnpm install

 

 

5.参考

Vue2.0 + Element-UI + WebAPI实践：简易我的记帐系统

vue2.0+element+node+webpack搭建的一个简单的后台管理界面

Vue下面安装Element 的详细步骤

Timymce官方Demo