Vue2.0 第一步
1:打開控制台,利用腳手架工具來建立工程相關代碼
Node需要4.0+
檢視node需要指令node -v
安裝vue-cli指令:npm install -g vue-cli,
完了再檢視vue指令: vue
看到了常用的vue指令有:vue list(列出可用的模闆)
谷歌一下就是:
是以模闆我們選webpack
那麼我們起名字叫labexam,用vue initwebpack labexam
之後可以選擇要不要:--項目名稱,項目描述,作者,是否用exlint風格檢查器,選擇一個模闆(通常用标準的也就是standard),karma前端單元測試的庫,(每行回車結束)
Ps:這是vue2.5.1的模闆了
接着執行這個 ls能看到建立好的工程檔案夾:我的就是labexam
進去看一看: cdlabexam和 ls 檢視此目錄下所有檔案
接着用npminstall來下載下傳在package.json包裡面的依賴,會比較慢
終于下載下傳好了,繼續檢視會多出來幾個檔案:node-module(依賴的東西 ) build(建構的東西) config
Src(生成好的放源代碼的東西) static
好了,到這裡就可以跑起來啦!
直接npm run dev (注意8080的端口不要被占用哦)
在浏覽器輸入:localhost:8080,顯示如下
2:Vue2.0補充的插件有很多的,一個一個來
vue-router安裝;
1:先在package加依賴(往後下載下傳插件都是如此),鍵值對------''名稱:版本'',版本去github上找
2:本來應該是在控制台寫:npminstall vue-router
但是由于加了了依賴,node會自動檢視依賴,是以直接輸入npm install 回車等着顯示安裝成功就行啦
3:直接去node-module下面看這個vue-router的package.json檔案,檢視他的名字name,不然不知道怎麼引用這個路由
這裡就叫vue-router 是以在.vue檔案或者.js檔案引用的時候就是:
4:蛋疼的是vue還是不忍得這個router,還必須來一句
Vue.use(VueRouter)這才算注冊插件
Stylus:
1:同理在devDependencies裡面寫:
"stylus": "^0.54.5",
"stylus-loader":"^2.4.0",
然後再npm install
,看node-module目錄有沒有這倆東西:
Vue-resource
Npm install
同樣的,node-module也是有這個resource的
,還得引用然後注冊:
好,完成啦!
順便說一句:不要使用内置或保留的HTML元素作為元件id：header或者 head
因為header,head都是HTML5的元素了
是以我寫成了這樣:
最後樣子:
下一步就是:
準備:reset.css(開發通用 樣式);
bootstrap.min.css(好看的元件樣式)
Common:stylus(項目通用的元件 樣式如)