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 中插入一个按钮

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <el-button type="primary">主要按钮</el-button> <!-- 新插入代码 -->
    <router-view/>
  </div>
</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: '<App/>'
})

重新运行 npm run dev

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

七, 集成 MintUI

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

集成方法和 ElementUI 基本一致

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

npm install mint-ui -S

App.vue 中增加一个按钮

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <mt-button>按钮</mt-button>
    <router-view/>
  </div>
</template>

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: '<App/>'
})

最后查看一下页面效果

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