vue及ElementUI环境搭建

1. nodejs安装及npm安装

• 下载地址：https://nodejs.org/en/download/
• 选择windows Installer
• 下载完成后 运行node-v8.11.1-x64.msi
• 重启电脑后，node和npm都安装完成
• 经过 node -v 和 npm -v 命令验证是否按照成功
• npm 安装太慢，能够切换成淘宝npm镜像cnpm，安装命令

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

• cnpm -v 验证是否安装成功

2. vue安装

• 全局安装vue-cli

npm instsall -g vue-cli

3. 初始化vue项目

# demo是项目名
vue init webpack demo

• 接下来会有一些初始化的设置，其中vue-router是路由，反正我都会选择安装，其余的能够回车跳过或者选择no
• 按照提示，cd到新建的项目下，运行npm install
• 运行npm run dev
• 到这里，不出意外的话能够在浏览器里面看到Vue的初始化模板了，若是没有多是端口号被占用，这里就将配置文件config/index.js里面的端口号改掉就能够了
• 另外还要补充一下，最后的打包若是在本地起服务器运行打包后的文件是没法运行的，会报错404，因此这里将assetsPublicPath里面的 "/"改为"./"

4. 安装ElementUI

• cd到当前项目 运行 npm i element-ui -S
• 打开src目录下的main.js , 修改以下：

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

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

• 在components目录下，修改HelloWorld.vue， 在template内加入以下代码：

<div class="block">
      <span class="demonstration">默认显示颜色</span>
      <span class="wrapper">
        <el-button type="success">成功按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
        <el-button type="info">信息按钮</el-button>
      </span>
    </div>
  </div>

-- 执行命令 npm run dev，就能够看到elementUi是否成功

5. 打包

• 在项目目录下运行 npm run build 运行完成以后会在项目里面增长一个dist的目录，直接把这个目录丢给服务器就行了，dist目录的名字能够自定义在配置文件里面