從新建vue專案到引入元件Element 以及Error when rendering component報錯解決 一、新建專案 1.開啟cmd，執行：vue init webpack Vue-Demo 2.執行：cd Vue-Demo進入這一級 3.執行：npm install 4.執行：npm run dev 如果瀏覽器開啟之後，沒有加載出頁面，說明本地的8080 埠被佔用，需要修改一下配置檔案 config/index.js 解釋：1.將 build 的路徑字首修改為 ’ https://blog.csdn.net/lzc4869/article/details/ ‘（原本為 ’ / ‘），是因為打包之後，外部引入 js 和 css 檔案時，如果路 徑以 ’ / ’ 開頭，那麼在本地是無法找到對應檔案。所以如果需要在本地開啟打包後的檔案， 就得修改檔案路徑。 2.將埠號改為不常用的埠。

顯示頁面如下： 專案新建完成。

二、引入Element

1.開啟cmd，在當前目錄中執行：npm i element-ui -S 2.src/main.js（紅色的）

3.然後在.vue檔案裡就直接可以用了 例如：在src/components/Hello.vue做一下修改

執行：npm run dev

你將看到如下頁面：

成功的引入了Element!! 更多樣式請參考：http://element.eleme.io/#/zh-CN/component/layout

原因如下： Vue 2.1.5 將 _h 重新命名為 _c，而 Element 目前發的版本都是用以前的 compiler 編譯的， 導致新版 runtime 無法執行 Element。目前的解決方案是鎖定 Vue 的版本為 2.1.4 鎖定vue相關版本 npm remove vue #解除安裝相關的版本