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目錄的名字能夠自定義在配置文件裏面