Vue?cli及Vue?router實例詳解
前言:
vue-cli是vue官方出品的快速構(gòu)建單頁應(yīng)用的腳手架,里面集成了webpack,npm,nodejs,babel,vue,vue-router
1. 安裝
先安裝nodejs
配置環(huán)境變量



安裝vue-cli的前提是你已經(jīng)安裝了npm,在命令行工具中輸入npm -v 命令來檢測npm的安裝以及版本情況。
1.1 npm安裝
node下載地址:下載 | Node.js 中文網(wǎng)
安裝成功提示:npm -v
配置淘寶鏡像
npm config set registry https://registry.npm.taobao.org
1.2 vue-cli安裝
全局安裝vue-cli,命令行:
npm install vue-cli -g

PS:-g代表全局安裝,然后查看版本:
vue -V
PS: 注意這里的V是大寫
2. 初始化項目
2.1vue init命令講解
用vue init命令來初始化項目,具體使用方法如下:
vue init <template-name> <project-name>
init:表示要用vue-cli來初始化項目
<template-name>:表示模板名稱,vue-cli官方提供的5種模板:
- webpack:一個全面的webpack+vue-loader的模板,功能包括熱加載,linting,檢測和CSS擴展。
- webpack-simple:一個簡單webpack+vue-loader的模板,不包含其他功能,讓你快速的搭建vue的開發(fā)環(huán)境。
- browserify:一個全面的Browserify+vueify 的模板,功能包括熱加載,linting,單元檢測。
- browserify-simple:一個簡單Browserify+vueify的模板,不包含其他功能,讓你快速的搭建vue的開發(fā)環(huán)境。
simple:一個最簡單的單頁應(yīng)用模板。
<project-name>:標(biāo)識項目名稱,用戶根據(jù)自己的項目來起名字。
2.2 項目初始化
在實際開發(fā)中,一般都會使用webpack這個模板,命令使用如下:
vue init webpack my-vue-demo

Project name:項目名稱 ,默認(rèn)為初始化建項目的名稱my-vue-demo,不需要直接回車
Project description:項目描述,默認(rèn)為A Vue.js project,不需要直接回車
Author:作者,如果有配置git的作者,自動會讀取。直接回車
Install vue-router? 是否安裝vue的路由插件,需要安裝,選擇Y
Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風(fēng)格。不需要輸入n,需要選擇y,如果是大型團隊開發(fā),最好是進行配置
setup unit tests with Karma + Mocha? 是否需要安裝單元測試工具,不需要輸入n,需要選擇y
Setup e2e tests with Nightwatch? 是否安裝e2e來進行用戶行為模擬測試,不需要輸入n,需要選擇y
初始化完成之后會出現(xiàn)以下信息,表示操作成功。

3. 運行項目
cd my-vue-demo,使用cd命令進入到項目目錄
npm run dev
以上命令為開發(fā)模式下運行項目
npm run build
以上命令為項目發(fā)布打包
4. 成功頁面

5. 項目結(jié)構(gòu)
5.1 總體框架
一個vue-cli的項目結(jié)構(gòu)如下,其中src文件夾是需要掌握,其余了解即可。
文件夾目錄如下:
每個文件夾目錄詳細說明如下:

5.2 配置目錄文件詳解
1. build目錄(webpack配置)
build文件主要是webpack的配置,目錄詳情如下:

2. config目錄(vue項目配置目錄)
config文件主要是項目相關(guān)配置,常用的就是當(dāng)端口沖突時配置監(jiān)聽端口,打包輸出路徑及命名等,目錄詳情如下:

3. node_modules(項目依賴包)
node_modules里面是項目依賴包,其中包括很多基礎(chǔ)依賴,自己也可以根據(jù)需要安裝其他依賴。安裝方法打開命令工具,進入項目目錄,輸入npm install [依賴包名稱],回車
在兩種情況下我們會自己去安裝依賴:
》項目運行缺少該依賴包
》安裝插件:如vuex
PS:有時會安裝指定依賴版本,需在依賴包名稱后加上版本號信息,如npm install vue-loader@11.1.4
5.3src項目核心文件講解
核心文件目錄前面已經(jīng)說明了,下面重點講解index.html,main.js,App.vue,router的index.js,HelloWorld.vue
1. index.html(主頁)
index.html為項目的主頁,跟其他html一樣,但一般只定義一個空的根節(jié)點,在main.js里面定義的實例將掛載在根節(jié)點下,內(nèi)容都通過vue組件來填充。說明如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>my-vue-demo</title>
</head>
<body>
<!-- 定義的vue實例將掛載在#app節(jié)點下 -->
<div id="app"></div>
</body>
</html>2. main.js(入口文件)
main.js為項目的入口文件,即單入口,主要是引入vue框架,根組件及路由設(shè)置,并且定義vue實例,說明如下:
// 引入vue框架
import Vue from 'vue'
// 引入根組件
import App from './App'
// 引入路由配置
import router from './router'
// 關(guān)閉生產(chǎn)模式下給出的提示
Vue.config.productionTip = false
// 定義實例
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})3. App.vue(根組件)
一個vue頁面通常由三部分組成:模板(template)、js(script)、樣式(style),說明如下:
<!-- 模板 -->
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<!-- js代碼 -->
<script>
export default {
name: 'App'
}
</script>
<!-- css樣式 -->
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>[template-模板]
(1) 模板只能包含一個父節(jié)點,也就是說頂層的div只能有一個(如上圖,父節(jié)點為#app的div,其沒有兄弟節(jié)點)
(2)<router-view/>是子路由視圖插槽,后面的路由頁面都顯示在此處,相當(dāng)于iframe
【script-JS代碼】
vue通常用es6來寫,用export default導(dǎo)出,其下面可以包含數(shù)據(jù)data,生命周期(mounted等),方法(methods)等。
【style-CSS樣式】
樣式通過style標(biāo)簽<style></style>包裹,默認(rèn)是影響全局的,如需定義作用域只在該組件下起作用,需在標(biāo)簽上加scoped,<style scoped></style>
引入外部CSS示例:
<style> import './assets/css/public.css' </style>
4. router(路由配置)
router文件夾下,有一個index,js的路由配置文件,說明如下:
// 引入vue框架
import Vue from 'vue'
// 引入vue-router路由依賴
import Router from 'vue-router'
// 引入頁面組件,命名為HelloWorld
import HelloWorld from '@/components/HelloWorld'
// 使用路由依賴
Vue.use(Router)
// 定義路由配置
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})5. HelloWorld.vue(頁面組件)
最熟悉的HelloWorld輸出,說明如下:
<template>
<div>
<!-- 輸出變量 -->
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
// 定義頁面名稱,可以不要
name: 'HelloWorld',
data () {
return {
// 定義變量
msg: 'HelloWorld'
}
}
}
</script>
<style scoped>
h1 {
font-size: 16px;
font-weight: normal;
}
</style>6. VUE-ROUTER
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,讓構(gòu)建單頁面應(yīng)用變得易如反掌。
包含的功能有:
- 嵌套的路由/視圖表
- 模塊化的、基于組件的路由配置
- 路由參數(shù)、查詢、通配符
- 基于 Vue.js 過渡系統(tǒng)的視圖過渡效果
- 細粒度的導(dǎo)航控制
- 帶有自動激活的 CSS class 的鏈接
- HTML5 歷史模式或 hash 模式,在 IE9 中自動降級
自定義的滾動條行為
6.1 快速入門
安裝
vue-router是一個插件包,需要用npm來進行安裝的。如果采用vue-cli構(gòu)建初始化項目會提示安裝,也可以自己使用命令安裝:
npm install vue-router --save
解讀核心文件
用vue-cli構(gòu)建項目之后,在src/router/index.js文件中,看到以下的路由核心文件:
// 引入vue框架
import Vue from 'vue'
// 引入vue-router路由依賴
import Router from 'vue-router'
// 引入頁面組件,命名為HelloWorld
import HelloWorld from '@/components/HelloWorld'
// Vue全局使用Router
Vue.use(Router)
// 定義路由配置
export default new Router({
routes: [ //配置路由,這里是個數(shù)組
{ //每一個鏈接都是一個對象
path: '/', //鏈接路徑
name: 'HelloWorld', //路由名稱,
component: HelloWorld //對應(yīng)的組件模板
}
]
})使用
在系統(tǒng)入口文件main.js中注入router,代碼如下:
// 引入vue框架
import Vue from 'vue'
// 引入根組件
import App from './App'
// 引入路由配置
import router from './router'
// 關(guān)閉生產(chǎn)模式下給出的提示
Vue.config.productionTip = false
// 定義實例
new Vue({
el: '#app',
router, // 注入框架中
components: { App },
template: '<App/>'
})6.2 頁面跳轉(zhuǎn)
1.router-link標(biāo)簽跳轉(zhuǎn)
在html標(biāo)簽內(nèi)使用router-link跳轉(zhuǎn),相應(yīng)于超鏈接a標(biāo)簽,使用方式如下:
<router-link to="/">[顯示字段]</router-link>
to:導(dǎo)航路徑
使用示例如下:
<p>導(dǎo)航 : <router-link to="/">首頁</router-link> <router-link to="/hello">hello</router-link> </p>
2.編程式導(dǎo)航-JS代碼內(nèi)部跳轉(zhuǎn)
實際項目中,很多時候都是通過在JS代碼內(nèi)部進行導(dǎo)航的跳轉(zhuǎn),使用方式如下:
this.$router.push('/xxx')具體的簡單用法:
(1)先編寫一個按鈕,在按鈕上綁定goHome( )方法。
<button @click="goHome">回到首頁</button>
(2)在<script>模塊里加入goHome方法,并用this.$router.push(‘/’)導(dǎo)航到首頁
export default {
name: 'app',
methods: {
goHome(){
this.$router.push('/home');
}
}
}3. 其它常用方法
// 后退一步記錄,等同于 history.back() this.$router.go(-1) // 在瀏覽器記錄中前進一步,等同于 history.forward() this.$router.go(1)
6.3子路由-路由嵌套
子路由,也叫路由嵌套,采用在children后跟路由數(shù)組來實現(xiàn),數(shù)組里和其他配置路由基本相同,需要配置path和component,然后在相應(yīng)部分添加<router-view/>來展現(xiàn)子頁面信息,相當(dāng)于嵌入iframe。具體看下面的示例:
1.src/components/Home.vue(父頁面)
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<!-- 添加子路由導(dǎo)航 -->
<p>導(dǎo)航 :
<router-link to="/home">首頁</router-link> |
<router-link to="/home/one">-子頁面1</router-link> |
<router-link to="/home/two">-子頁面2</router-link>
</p>
<!-- 子頁面展示部分 -->
<router-view/>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
msg: 'Home Page!'
}
}
}
</script>
<style scoped>
</style>2.src/components/One.vue(子頁面1)
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'One',
data () {
return {
msg: 'Hi, I am One Page!'
}
}
}
</script>
<style scoped>
</style>3.src/components/Two.vue(子頁面2)
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'Two',
data () {
return {
msg: 'Hi, I am Two Page!'
}
}
}
</script>
<style scoped>
</style>4.src/router/index.js(路由配置)
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import One from '@/components/One'
import Two from '@/components/Two'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/', // 默認(rèn)頁面重定向到主頁
redirect: '/home'
},
{
path: '/home', // 主頁路由
name: 'Home',
component: Home,
children:[ // 嵌套子路由
{
path:'one', // 子頁面1
component:One
},
{
path:'two', // 子頁面2
component:Two
},
]
}
]
})5. 效果圖

PS:各部分代碼都很簡單,也有注釋,在采用vue-cli初始化項目完成之后直接復(fù)制到相應(yīng)目錄即可查看效果。
6.4路由傳遞參數(shù)
1.通過<router-link> 標(biāo)簽中的to傳參
基本語法:
<router-link :to="{name:xxx, params:
{key:value}}">valueString</router-link>PS:上面to前邊是帶冒號,后邊跟的是一個對象形勢的字符串
- name:在路由配置文件中起的name值。叫做命名路由,下一節(jié)會講到。
- params:要傳的參數(shù),它是對象形式,在對象里可以傳遞多個值。
具體實例如下:
(1)在src/components/Home.vue里面導(dǎo)航中添加如下代碼:
<router-link :to="{name: 'one', params:{username:'test123'}}">子頁面1</router-link>(2)在src/router/indes.js中添加如下代碼,重點是name:\
{
path:'one', // 子頁面1
name: 'one', // 路由名稱-命名路由
component:One
}(3)在src/components/One.vue里面接受參數(shù),代碼如下:
<h2>{{$route.params.username}}</h2>2. url中傳遞參數(shù)
(1)在路由中以冒號傳遞,在src/router/index.js中加入如下代碼:
{
path:'/home/two/:id/:name', // 子頁面2
component:Two
},(2)接受參數(shù),在src/components/Two.vuez中加入如下代碼:
<p>ID:{{ $route.params.id}}</p>
<p>名稱:{{ $route.params.name}}</p>(3)路由跳轉(zhuǎn),在src/components/Home.vue中加入如下代碼:
<router-link to="/home/two/1/張三">子頁面2</router-link>
PS:to前沒有冒號為字符串路由,必須全部匹配。
(4)如果路由參數(shù)需要有特定的規(guī)則,就需要加入正則表達式了,示例如下:
{
path:'/home/two/:id(\\d+)/:name', // 子頁面2
component:Two
}3.編程式導(dǎo)航-params傳遞參數(shù)
(1)在src/router/index.js頁面加入如下代碼:
{
path:'/home/three', // 子頁面3
name: 'three',
component:Three
}(2)在src/components/Three.vue頁面加入如下代碼:
<p>ID:{{ $route.params.id}}</p>
<p>名稱:{{ $route.params.name}}</p>(3)在src/components/Home.vue中加入如下代碼:
// template
<button @click="toThreePage">頁面3-params傳參</button>
// script
methods: {
toThreePage() {
this.$router.push({name: 'three', params: {id: 1, name: 'zhangsan'}})
}
}說明:
A、動態(tài)路由使用params傳遞參數(shù),在this.$router.push() 方法中path不能和params一起使用,否則params將無效。需要用name來指定頁面。
B、以上方式參數(shù)不會顯示到瀏覽器的地址欄中,如果刷新一次頁面,就獲取不到參數(shù)了,改進方式將第一部中的代碼改成如下:
{
path:'/home/three/:id/:name', // 子頁面3
name: 'three',
component:Three
}4. 編程式導(dǎo)航-query傳遞參數(shù)
(1)在src/router/index.js頁面加入如下代碼:
{
path:'/home/three', // 子頁面3
name: 'three',
component:Three
}(2)在src/components/Three.vue頁面加入如下代碼:
<p>ID:{{ $route.query.id}}</p>
<p>名稱:{{ $route.query.name}}</p>(3)在src/components/Home.vue中加入如下代碼:
// template
<button @click="toThreePage">頁面3-params傳參</button>
// script
methods: {
toThreePage() {
this.$router.push({path: '/home/three', query: {id: 1, name: 'zhangsan'}})
}
}PS:動態(tài)路由使用query傳遞參數(shù),會顯示到瀏覽器地址欄中,以上鏈接為
/home/three?id=1&name=zhangsan
6.5命名路由-命名視圖-重定向-別名
1. 命名路由
給一個路由命一個唯一的名稱,然后跳轉(zhuǎn)調(diào)用這個名稱即可。
(1)在src/router/index.js中加一個帶name的路由,代碼如下:
{
path: 'one', // 子頁面1
name: 'one', // 路由名稱-命名路由
component: One // 頁面組件
}(2)在src/component/Home.vue頁面中調(diào)用,代碼如下:
// template跳轉(zhuǎn)調(diào)用
<router-link :to="{name: 'one'}">子頁面1</router-link>
// router.push函數(shù)跳轉(zhuǎn)調(diào)用
router.push({ name: 'user'}})2.命名視圖
在同一個頁面展示多個視圖,如果不用嵌套,只能采用命名視圖來實現(xiàn)了,代碼如下:
(1)在src/router/index.js中,代碼如下:
import Vue from 'vue'
import Router from 'vue-router'
// 創(chuàng)建頁面組件
const Header = { template: '<div>Header</div>' }
const Left = { template: '<div>Left</div>' }
const Right = { template: '<div>Right</div>' }
Vue.use(Router)
export default new Router({
routes: [
{
path: '/', // 主頁路由
components: {
default: Header,
a: Left,
b: Right
}
}
]
})(2)在src/App.vue中,代碼如下:
<template>
<div id="app">
<router-view />
<router-view name="a" class="left" />
<router-view name="b" class="right" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
width: 500px;
border: 1px solid red;
margin: 0 auto;
}
.left,.right{
float: left;
width:48%;
text-align: center;
border:1px solid red
}
</style>PS:經(jīng)過實踐,命名視圖只能放在最頂級的頁面中,即第一步中的代碼不能放在其他頁面中。
3.重定向
重定向是通過route的配置中關(guān)鍵詞redirect來實現(xiàn)的,具體代碼如下:
(1)在src/router/index.js中,代碼如下:
export default new Router({
routes: [
{
path: '/', // 默認(rèn)頁面重定向到主頁
redirect: '/home' // 重定向
},
{
path: '/home', // 主頁路由
component: Home,
children:[ // 嵌套子路由
{
path:'/home/two/:id/:name', // 子頁面2
component:Two
},
{
path:'/home/three/:id/:name', // 子頁面3
name: 'three', // 路由名稱-命名路由
redirect: '/home/two/:id/:name' // 重定向-傳遞參數(shù)
},
]
}
]
})(2)在src/components/Home.vue中,代碼如下:
<router-link to="/">首頁</router-link> |
<router-link to="/home/two/1/lisi">子頁面2</router-link> |
<router-link :to="{name: 'three', params: {id: 1, name: 'zhangsan'}}">子頁面3</router-link>說明1-不帶參數(shù)的重定向:
redirect: '/home' // 重定向-不帶參數(shù)
說明2-帶參數(shù)的重定向:
redirect: '/home/two/:id/:name' // 重定向-傳遞參數(shù)
4. 別名
重定向是通過route的配置中關(guān)鍵詞alias來實現(xiàn)的,具體代碼如下:
(1)在src/router/index.js中,代碼如下:
{
path:'/one', // 子頁面1
component:One,
alias: '/oneother'
}(2)在src/components/Home.vue中,代碼如下:
<router-link to="/oneother">子頁面1</router-link>
說明1:redirect和alias的區(qū)別
- redirect:直接改變了url的值,把url變成了真實的path路徑。\
alias:url路徑?jīng)]有別改變,這種更友好,讓用戶知道自己訪問的路徑,只是改變了<router-view>中的內(nèi)容。
說明2:
別名請不要用在path為’/’中,如下代碼的別名是不起作用的。
{
path: '/',
component: Hello,
alias:'/home'
}到此這篇關(guān)于Vuecli及Vuerouter詳解的文章就介紹到這了,更多相關(guān)VuecliVuerouter內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue執(zhí)行方法,方法獲取data值,設(shè)置data值,方法傳值操作
這篇文章主要介紹了Vue執(zhí)行方法,方法獲取data值,設(shè)置data值,方法傳值操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue前端實現(xiàn)導(dǎo)出頁面為word的兩種方法
這篇文章主要介紹了Vue前端實現(xiàn)導(dǎo)出頁面為word的兩種方法,文中通過代碼示例和圖文介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-12-12

