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按鈕,其他組件請自行看文檔實驗;