關於Vue的路由、腳手架筆記

在頁面引入vue-router.js文件，開始配置路由

 

<div id="box">

<ul><li> <a v-link="{path:'/home'}">主頁</a> </li>  //點擊跳轉路由

 <li> <a v-link="{path:'/news'}">新聞</a></li>  

</ul>

<div> <router-view></router-view> </div>       //路由顯示區域

</div>

 

<script>

var App=Vue.extend();          //1. 准備一個根組件（總的組件）

var Home=Vue.extend({        //2. 為Home News組件定義模版准備

template:'<h3>我是主頁</h3>'

});

var News=Vue.extend({

template:'<h3>我是新聞</h3>'

});

var router=new VueRouter();   //3. 准備路由，實例化一個路由

//4. 關聯

router.map({                //使用router.map將模版進行關聯

'home':{                    //設置跳轉名稱'home

component:Home       //綁定到定義好的模版

},

'news':{

component:News

}

});

router.start(App,'#box');  //5. router.start啟動路由，綁定總組件到指定元素

router.redirect({  '/' : '/home'  });         //6. router.redirect默認跳轉

</script>

 

 

 

路由的嵌套：在關聯路由的模版內使用  subRoutes

<template id="home">     //父級路由的模版

<h3>我是主頁</h3>

<div>                 //內部嵌套路由

<a v-link="{path:'/home/login'}">登錄</a> //注意子路由的路徑

<a v-link="{path:'/home/reg'}">注冊</a>

</div>

<div>

<router-view></router-view>

</div>

</template>

 

router.map({     //4. 關聯路由

'home':{

component:Home,

subRoutes:{     //在模版內部使用subRoutes定義子路由模版

'login':{

component:{

template:'<strong>我是登錄信息</strong>'

}

},

'reg':{

component:{

template:'<strong>我是注冊信息</strong>'

}

}

}

},

'news':{

component:News

}

});

 

路由鏈接后面帶參數獲取：$route.params

<a v-link="{path:'/news/detail/001'}">新聞001</a>

<a v-link="{path:'/news/detail/002'}">新聞002</a>   //跳轉鏈接后面帶參數

 

'news':{

component:News,

subRoutes:{

'/detail/:id':{     //在定義的路由跳轉名稱后面加：名稱

component:Detail

}

}

}

 

以下方法返回的都是一個JSON對象，需要過濾轉化

{{$route.params | json}}          //獲取當前路由鏈接地址后的參數

{{$route.path}}                // 獲取當前路由鏈接的路徑

{{$route.query | json}}           //獲取當前路由鏈接？后面的數據

 

 

 

 

Vue-loader的使用：

 

vue文件內容介紹:    放置的是vue組件代碼

 

<template> html文本  </template>

<style>   css文本 </style>

<script>   js文本 （平時代碼、ES6） </script>

 

Vue-loader簡單的目錄結構:

index.html         主頁面

main.js            入口文件，為webpack打包准備

App.vue         vue文件組件，官方推薦命名法，第一個字母大寫

package.json     工程文件(放置項目依賴、名稱、配置)

webpack.config.js webpack配置文件

 

ES6語法: 模塊化開發思想

導出模塊：  export default {}

引入模塊:    import 自定義模塊名 from 地址

 

npm init --yes   該指令可生成package.json文件

--save-dev  :  將下載的文件寫入配置文件中的"devDependencies"

--save：       將下載的文件寫入配置文件中的"dependencies"

 

使用Vue-loader的准備工作：

1、下載webpack：   出現node_modules文件

npm install webpack --save-dev    不帶服務器的版本

npm install webpack-dev-server --save-dev    帶服務器的版本

 

在package.json中的“scripts”對象中，配置好運行打開監聽端口指令，--port 8082為自定義端口，默認為8080端口

  "scripts": {

    "dev": "webpack-dev-server --inline --hot --port 8082"

  },

 

在命令行打開文件目錄，輸入npm run dev   

在瀏覽器打開http://localhost:8082/   即可訪問

 

2、下載vue-loader ：  node_modules文件內出現vue-loader文件

vue-loader可以將App.vue等文件編譯成正常文件

npm install vue-loader@8.5.4 --save-dev     使用8.5.4 版本

 

3、下載解析vue文件內部HTML、CSS、JS所需要的模塊

vue-html-loader                解析HTML部分

css-loader、vue-style-loader    解析style部分

vue-hot-reload-api@1.3.2       解析JS部分，使用1.3.2 版本

 

cnpm install vue-html-loader  css-loader  vue-style-loader vue-hot-reload-api@1.3.2  --save-dev  一次性下載所有loader

 

4、下載babel-loader 以及需要的各個babel插件

babel-loader   可以把ES6語法編譯成ES5語法的模塊

babel-loader

babel-core

babel-plugin-transform-runtime

babel-preset-es2015

babel-runtime

npm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime --save-dev

 

5、下載vue@1.0.28

npm install vue@1.0.28 --save

 

模塊化開發，加入路由：配合vue-loader使用

1、下載vue-router@0.7.13模塊

npm install vue-router@0.7.13 --save-dev

 

2、在入口文件里引入vue-router並使用

import VueRouter from 'vue-router'

Vue.use(VueRouter);

 

3、在入口文件中配置路由

var router=new VueRouter();

router.map({

路由規則

})

router.start(App,'#app');

 

 

注意事項：

使用了路由后，原本index.html文件中的<app></app>改變

變成<div id="app"></div>，

App.vue文件中的模版需要一個 <div id="app"></div>作為父元素包裹

 

關於項目的打包上線：

在package.json文件文件增加"build":"webpack -p"

命令行執行  npm run build

 

關於vue-cli 腳手架：幫助你搭好基本的項目結構

提供了多種模版：

simple 最簡單的模版，只具備基本的語法

webpack 集合多種功能，如Eslint 檢查代碼規范，單元測試

webpack-simple     沒有代碼檢查

基本使用流程:

1. npm install vue-cli -g            安裝 vue命令環境

如何驗證安裝ok?        vue --version       教程使用2.4.0

 

2. 生成項目模板

vue init <模板名> 本地文件夾名稱

例如：vue init simple#1.0  simple-test

vue init webpack#1.0 webpack-test

vue init webpack-simple #1.0 webpack-simple-test       

端口號 config/index.js里面修改

 

3. 進入到生成目錄里面   cd xxx

4. 按照依賴項 npm install

5. npm run dev

 

 

如何在腳手架里面使用less

1、安裝需要使用到的less模塊和less-loader模塊

   並在wenpack.config.js里面配置

命令行：npm i install less less-loader --save-dev

配置： { test: /\.less$/, loader: 'less'}

2、在<style></style>標簽中加入 lang=”less”

lang=”less”  表示聲明語言

scoped     表示局部的，里面的樣式只有當前文件可以使用

 

 

如何在腳手架里面使用scss

安裝node-sass ,sass-loader,vue-style-loader，css-loader

lang=“scss”

 

 

npm install vue-cli -g

vue init webpack-simple #1.0 webpack-simple-test  

npm install vue-router --save

cd vue-test

 npm install

npm run dev.