一.安裝node.js

首先需要安裝node環境，可以直接到中文官網http://nodejs.cn/下載安裝包。

只是這樣安裝的 node 是固定版本的，如果需要多版本的 node，可以使用 nvm 安裝http://blog.csdn.net/s8460049/article/details/52396399

安裝完成後，可以命令列工具中輸入 node -v 和 npm -v，如果能顯示出版本號，就說明安裝成功。

二、安裝 vue-cli

安裝好了 node，我們可以直接全域性安裝 vue-cli：

npm install -g vue-cli 全域性安裝

# 建立webpack專案 # vue init [vue-cli模板名稱] [專案資料夾] vue init webpack my-project

安裝依賴：

npm install

三、執行專案

npm run dev

專案結構圖

四、打包上線

自己的專案檔案都需要放到 src 資料夾下

專案開發完成之後，可以輸入 npm run build 來進行打包工作

npm run build

打包完成後，會生成 dist 資料夾，如果已經修改了檔案路徑，可以直接開啟本地檔案檢視

專案上線時，只需要將 dist 資料夾放到伺服器就行了。

vue打包需要注意的問題：

當使用 npm run build 打包完成，發現頁面空白，其中有一點就是頁面資源路徑的問題！

注意：

1、記得改一下config下面的index.js中bulid模組匯出的路徑。因為index.html裡邊的內容都是通過script標籤引入的，而你的路徑不對，開啟肯定是空白的。先看一下預設的路徑。

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true,

 

assetsPublicPath預設的是 ‘/’ 也就是根目錄。而我們的index.html和static在同一級目錄下面。 所以要改為 ‘./ ’ 

五、安裝element-ui

1.安裝命令：cnpm install element-ui --save

2.在main.js中加入如下程式碼：

import ElementUi from 'element-ui' //引入js

import '../node_modules/element-ui/lib/theme-chalk/index.css'//引入css

Vue.use(ElementUI)

3. 輸入命令：npm run dev 執行專案

這樣你接可以盡情的使用element ui

注意以下幾個坑：

1.是否引入js與css檔案

css檔案是靜態檔案地址，安裝教程安裝地址不會出錯

2.檢查node的版本，是否node版本過低

3.檢查以下你的npm版本 npm版本是否過低