1调俘、項(xiàng)目使用的相關(guān)技術(shù)
vue2.0
webpack
element ui
vue-router
2跌造、環(huán)境搭建
- 是否安裝node：
node -v檢測本地是否安裝node - 檢查本地npm版本：
npm -v -
npm install webpack -g全局安裝webpack -
npm install vue-cli -g安裝vue腳手架
3兰英、創(chuàng)建項(xiàng)目
vue init webpack-simple 工程名字<工程名字不能用中文>
初始化的設(shè)置举户，如下輸入:
Target directory exists. Continue? (Y/n)直接回車默認(rèn)(然后會(huì)下載 vue2.0模板蕉世，這里可能需要連代理)
Project name (vue-test)直接回車默認(rèn)
Project description (A Vue.js project) 直接回車默認(rèn)
Author 寫你自己的名字
Use sass 用sass 選的yes
安裝依賴 npm install
運(yùn)行項(xiàng)目 npm run dev
正常情況下，現(xiàn)在就可以在瀏覽器中看到如下界面啦
4狭姨、安裝其他依賴
npm install element-ui --save-dev
npm install vue-router --save-dev
npm install font-awesome --save-dev
npm install style-loader --save-dev
style-loader的用處：
css-loader 是處理css文件中的url()等
style-loader 將css插入到頁面的style標(biāo)簽
less-loader 是將less文件編譯成css
sass-loader 是將sass文件編譯成css
5、實(shí)際的項(xiàng)目開發(fā)
詳細(xì)的代碼code 可以參考如下github地址（git clone 項(xiàng)目地址苏遥，??歡迎指錯(cuò)）：
https://github.com/wylibra/mydemo-vue
6饼拍、學(xué)習(xí)
- router的使用
- $router.options.routes 路由數(shù)組
- $route.path 路由
- 導(dǎo)航折疊與展開顯示
7、遇到問題：
- 如何把本地項(xiàng)目部署到github田炭？
在github中新建項(xiàng)目师抄；
復(fù)制項(xiàng)目生成的遠(yuǎn)端地址（ 如 https://github.com/wylibra/mydemo-vue.git）；
提交本地代碼到本地倉儲(chǔ)（git add . git commit -m '注釋'）教硫；
使用命令：git remote add origin https://github.com/wylibra/mydemo-vue.git叨吮；
git push -u origin master
至此 項(xiàng)目成功部署到遠(yuǎn)端github中
以上都是個(gè)人零散的筆記??，粗糙不細(xì)致的地方盡管指出瞬矩，愿意接受意見茶鉴，更好的總結(jié)學(xué)習(xí)
http://a114c675.wiz03.com/share/s/2x5cpR2STAEP2U6pTf37HRJq1NDeIv03C4xr2CCrdX29BkpF
