安裝Vue腳手架和創建一個簡單的Demo

https://www.cnblogs.com/pengjunhao/p/6762141.html

https://www.cnblogs.com/yanxulan/p/8978732.html

 

查看node和npm的版本

node -v  或者  node --version

npm -v

cnpm -v

在中國為了提高效率，一般使用淘寶的鏡像

http://npm.taobao.org/

npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安裝npm鏡像，以后再用到npm的地方直接用cnpm來代替就好了

 

 

 

假設上面的全部安裝完畢，

全局安裝vue-cli

　　npm install --global vue-cli

如果是在mac電腦上，記得先sudo下

安裝完畢，查看下 vue --version

腳手架安裝成功后，就可以自己創建一個新的項目。

 

 

選擇合適的目錄進去，

運行 vue init webpack demo9之后敲擊回車鍵

會自行下載一些模版，稍加等待，之后跳出一些需要填寫的項目，如下

項目名稱： 不支持大寫字符了

項目描述：

一頭霧水繼續往下創建

 

創建完畢之后，進入目錄下

cd demo9，看下現在的目錄結構

 

 

npm i  或者用npm install 去下載需要的依賴

npm run dev

 

最后運行成功，告知了你的項目運行的url，自己打開瀏覽器輸入，ok，出來了~~~

 Vue.js 不支持 IE8 及其以下 IE 版本。

 

新增加一個component,在Src包下的components目錄下，新建一個Show.vue,里面塞入空模版

為了顯示的更有代表性，我把HelloWorld中的模版內容刪除了，也換了logo

注意代碼是從index.html  ------ main.js   -------App.vue

 

 

 

下一步想將vue組建，累加使用

 

添加路由

npm install vue-router --save

之后在main.js 中引入 

import VueResource from 'vue-resource'

在使用以下

Vue.use(VueResource)