vue 腳手架搭建新項目以及element-ui等vue組件的使用

vue快速搭建項目（前提是你的電腦已經安裝了node的環境和vue腳手架安裝，不會的自行百度）

　　1：打開終端：

　　　　

　　這裏說下此時位置是在User下的lijuntao文件夾下面，我通常會在桌面新建一個文件夾而後進去在執行下一步，若是你也想在桌面新建的話，就

　　　　就在終端裏面輸入cd desktop摁回車就進到桌面了

　　　　

　　　　，而後再cd 文件夾名字

　　　　

　　　　

2: 輸入命令vue init webpack-simple vueElemente 回車

　　　　

　　　　此時你就在文件夾vueElement裏面新建了一個名字叫 elm_dome的vue項目

　　　　項目描述是 A Vue.js project（能夠本身規定）

　　　　做者是lijuntao（可本身規定）

　　　　不用sass這個你本身選擇可用可不用

　　　　還有一種新建項目的方法

　　　　vue init webpack vueElement 回車（這個通常對應比較大的項目工程，你能夠兩個都試試看有什麼不用）

3：按上面提示作：

　　　　cd vueElement  回車

　　　　npm install ( 我使用的是cnpm install， 兩種同樣，這個是淘寶鏡像方法，由於比較快，不懂的自行百度）

　　　　

　　上圖就是正在下載項目項目所需的依賴，

　　下圖是成功後的樣子：

　　　　

　4：啓動項目

　　　　npm run dev 回車

　　　　

　　　　這樣就新建新建了一個vue項目 端口是8080，後期項目多了可能須要更改端口，

　　　　如何改端口？

　　　　進入到文件夾 vueElement裏面找到 package.json文件

　　　　

　　　　在以下位置添加 - - port 8023 

　　　　　

　　而後回到終端重啓項目

　　　　ctrl +c

　　　　npm run dev

　　　　

　　　　

　　端口是8023

使用element-ui組件　

　　http://element.eleme.io/#/zh-CN/component/upload文檔位置

回到終端：

　　npm i element-ui -S    至關於 npm install element- ui --save  (推薦使用淘寶鏡像方法，由於快）

　　

　　再打開你的package.json文件，有以下變化

　　

　　看文檔的快速上手   地址：http://element.eleme.io/#/zh-CN/component/quickstart

　　

　　　對比本身的package.json文件就可看出，本身文件裏面少了一個style-loader，因此就要去配置

　　　命令：

　　　　cnpm  i  style-loader -D 回車

　　　　

　　　在打開你的package.json 你會發現多了個style-loader

　　　　

　　而後配置你的webpack.config.js文件

　　　　

　　　　其實就是把這一部分補到你的webpack.config.js文件裏面的相應位置，

　　　　簡單一句話，對比人家的和你本身的缺什麼補什麼，直接複製粘貼過去，

　　　而後就是引用element-ui

　　　　配置mian.js文件

　　　　也是直接對比你的mian.js文件和人家的，缺什麼補什麼，複製粘貼過去

　　　而後直接看文檔例子用　　

　　　　找到你的文件夾裏面的app.vue文件

　　　　　　更改代碼

　　　　　　如圖

　　　　　　　　

　　　　

　　　　　　而後回到終端

　　　　　　　　npm run dev

　　　　　　　從新運行項目

　　　　　　　　效果圖以下

　　　　　　　　　　　　

 

這裏只是用了element-ui裏面的一個button按鈕，其餘組件請自行看文檔實驗；