創(chuàng)建項(xiàng)目
vue init webpack CnodeJS-Vue
一開始用了 vue init webpack-simple CnodeJS-Vue 目錄結(jié)構(gòu)相差很多。
vue init webpack CnodeJS-Vue
? Project name cnodejs-vue
? Project description rebuild CnodeJS by Vue
? Author yzygithub <yzyjs2012@gmail.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No
cd CnodeJS-Vue
#安裝依賴
npm install
#開發(fā)環(huán)境啟動服務(wù)
npm run dev
yzy@yzyMacBook-Pro:~/CODE/CnodeJS-Vue$ npm run dev
> cnodejs-vue@1.0.0 dev /Users/yzy/CODE/CnodeJS-Vue
> node build/dev-server.js
> Starting dev server...
DONE Compiled successfully in 3894ms 15:56:40
> Listening at http://localhost:8082
config/index.js 里的 build: { assetsPublicPath: '/', 改為 assetsPublicPath: './'
解釋：1.將 build 的路徑前綴修改為 ' ./ '（原本為 ' / '），是因?yàn)榇虬螅獠恳?js 和 css 文件時趣倾，如果路徑以 ' / ' 開頭饼煞，那么在本地是無法找到對應(yīng)文件痹束。所以如果需要在本地打開打包后的文件宇色，就得修改文件路徑。
安裝 element-ui
npm i element-ui -S
順便安裝了sublime 的vue插件施禾。command+shift+p =>Install Package=> vue syntax highlight
main.js里添加
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)
然后在.vue文件里就直接可以用了。
但是啟動服務(wù)后,頁面出現(xiàn)了cannot GET /
因?yàn)楦牧薱onfig/index.js里的dev: {assetsPublicPath: '/',} 搁胆，改成了assetsPublicPath: './' 弥搞。
安裝 axios
npm install axios --save-dev
在main.js添加
import axios from 'axios'
Vue.prototype.$http = axios
安裝 vue-svg-icon
npm install vue-svg-icon --save-dev
在main.js添加
import Icon from 'vue-svg-icon/Icon'
Vue.component('icon', Icon)
我在這里犯了個低級錯誤，寫成了'vue-svg-icon/Icon.vue'渠旁，報(bào)錯
'!xml-loader!../../src/svg'但是似乎只對第一次編譯有影響攀例。編譯成功過后，再加回.vue沒報(bào)錯
在src目錄中新建svg direction顾腊，然后將svg圖片放入src/svg
這里推薦一個svg圖片庫iconfont
在網(wǎng)頁中使用icon標(biāo)簽就可以了
<icon name="github" scale="4"></icon>
