一、安裝(npm)1抱婉、安裝相關(guān)包
npm install npm? ? ? ? ? ? ? //更新npm到最新版
npm install -g cnpm --registry=https://registry.npm.taobao.org? ? ? ? ? ? ? ? //安裝淘寶鏡像
cnpm install vue? ? ? ? ? ? //安裝vue
cnpm install webpack? ? ? ? //安裝webpack
cnpm install -g vue-cli? ? ? //全局安裝vue-cli```
2、切換到你想放置項(xiàng)目的目錄
vue init webpack projectname //創(chuàng)建項(xiàng)目[projectname]
進(jìn)入生成的[projectname]文件夾
cnpm install? ? ? ? ? ? ? ? //安裝依賴
cnpm install vue-router? ? ? //安裝vue-router```
3沸移、修改配置
在src目錄下找到main.js,在new Vue（）前添加如下代碼
import VueRouter from 'vue-router' //引入vue-router
Vue.use(VueRouter)? ? ? ? ? ? ? ? //安裝
4刷喜、定義路由
在添加的代碼下開(kāi)始定義路由，以下是一個(gè)完整的示例
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//引入組件
import Hello from 'components/Hello.vue'
import Sx from 'components/sx.vue'
import Sb from 'components/sb.vue'
import Ssr from 'components/ssr.vue'
import Ssx from 'components/ssx.vue'
const myRouter = new VueRouter({routes: [{path: "/",component: Hello}, {path: "/sx",component: Sx}, {path:'/sb',component:Sb},{path:'/ssr',component:Ssr},{path:'/ssx/:id',component:Ssx}]})
new Vue({el: '#app',template: '',components: {App,Hello,Sx,Sb,Ssr,Ssx},router: myRouter ?})
5察迟、在app.vue下添加相應(yīng)路由標(biāo)簽
6斩狱、啟動(dòng)實(shí)時(shí)預(yù)覽或者打包
cnpm run dev? ? ? ? ? ? ? ? //開(kāi)發(fā)環(huán)境預(yù)覽
cnpm run build? ? ? ? ? ? ? //打包到生產(chǎn)環(huán)境html css js
7耳高、建議
1，建議看過(guò)vue官方的教程再查看本示例所踊。
2泌枪，可以先不通過(guò)npm學(xué)習(xí)相關(guān)vue的內(nèi)容，再逐步轉(zhuǎn)換到npm方式上秕岛。
3碌燕，仔細(xì)看官方教程，vue:https://cn.vuejs.org/
4继薛，代碼塊版本：地址
