Vue2.0 ElementUI MintUI 安装全过程

Vue开发速度确实很快

所以在这里记录了安装全过程 供大家参考

一, 安装node.js 

https://nodejs.org/en/download/

安装非常简单 我下载的 windows 64位版本 的安装包一路 下一步 搞定

然后在cmd 命令行中 

node -v

我显示的版本号为 v8.9.0

安装好node.js 也会自动安装了npm 包管理器 

接下来输入  

npm -v

显示版本号 为5.5.1

二, 安装VSCODE编辑器

https://code.visualstudio.com/

这个编辑器个人比较推荐 因为里面有VUE插件 而且速度很快

还是下载 windows版本 一路下一步搞定

然后打开VSCODE 

菜单栏中 查看 -- 扩展 搜索 VUE 找到这个插件 

具体使用方法 里面有详细介绍 安装即可

三, 设置淘宝 npm 镜像

在cmd 命令行中 输入

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

最后提示

updated 1 package in 19.874s

然后输入

cnpm -v 

查看安装信息

四, 安装Webpack

使用管理员权限 打开cmd命令行

webpack 必须还是要装的 虽然安装vue工程的时候 会自己安装 但是建议还是先安装吧

这里建议国内Monkey  install 都采用 cnpm 来安装 

cnpm install -g webpack

五, 安装VUE

官网 https://cn.vuejs.org/

我们使用VSCODE打开一个文件夹 然后使用组合键Ctrl+`打开终端窗口 

首先安装Vue

cnpm install vue

接下来安装Vue cli

cnpm install --global vue-cli

然后初始化工程 后面的 . 代表当前目录 一路回车搞定 建议在问询是否使用eslint时 选择否

vue init webpack .

然后会自动安装依赖项目  如果这里不成功 我们可以手动安装依赖

cnpm install

最后依赖安装完毕 我们就可以启动项目了

npm run dev

终端会提示

 DONE  Compiled successfully in 2439ms    
 I  Your application is running here: http://localhost:8888

到这里 Vue就安装完毕

六,  集成 ElementUI 

ElementUI 是桌面UI框架   官网 http://element.eleme.io/

在终端或者使用cmd命令行 在工程目录下输入

cnpm i element-ui -S

然后打开src 目录下的 App.vue 文件 在template 中 插入一个按钮

...

然后打开 src 目录下的 main.js 文件 加入element-ui的引用如下代码

import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'; //引用库
import 'element-ui/lib/theme-chalk/index.css'; //引用样式
import router from './router'

Vue.config.productionTip = false
Vue.use(ElementUI) //使用库

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

重新运行 npm run dev 

看到蓝色按钮 代表已经集成成功

七,  集成 MintUI 

MintUI 是移动端的UI库   官网 http://mint-ui.github.io/ 

集成方法和 ElementUI 基本一致 

在终端或者使用cmd命令行 在工程目录下输入

npm install mint-ui -S

App.vue 中增加一个按钮

main.js 中

import Vue from 'vue'
import App from './App'
import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';
import router from './router'

Vue.config.productionTip = false
Vue.use(MintUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

最后查看一下页面效果

面看到一个灰了吧唧的按钮 代表集成成功