使用 vue-cli( 腳手架) 搭建項目
基于vue-cli 創(chuàng)建一個模板項目 通過 npm root -g 可以查看vue全局安裝目錄,進而知道自己有沒有安裝vue-cli
如果沒有安裝的話,使用如下命令全局安裝 cnpm install -g vue-cli 創(chuàng)建一個基于webpack的新項目,在這過程中, 會安裝依賴 vue
init webpack 項目名 啟動 cd vue-router-demo npm start
常用的目錄結(jié)構(gòu)

如果我們的項目是通過腳手架搭建的,這已經(jīng)是一個比較完善的種子項目了
|-- build : webpack 相關(guān)的配置文件夾(基本不需要修改) |-- config: webpack 相關(guān)的配置文件夾(基本不需要修改)
|-- index.js: 指定的后臺服務(wù)的端口號和靜態(tài)資源文件夾 |-- node_modules: 在上面安裝的依賴,都存放在這個文件夾下 |-- src
: 源碼文件夾,我們后續(xù)開發(fā)的組件和js分門別類的放在這里面 |-- main.js: 應(yīng)用入口 js |-- static: 靜態(tài)資源文件夾 |--
.babelrc: babel 的配置文件 |-- .editorconfig: 通過編輯器的編碼/格式進行一定的配置 |-- .eslintignore:
eslint 檢查忽略的配置 |-- .eslintrc.js: eslint 檢查的配置 |-- .gitignore: git 版本管制忽略的配置 |--
index.html: 主頁面文件 |-- package.json: 他就相當于maven的pom.xml, 里面存放著相關(guān)的依賴信息和項目的版本信息
|-- README.md: 應(yīng)用描述說明的 readme 文件
配置config/index.js

可以在config/index.js中做一下的常用配置

* 添加跨域的配置
* 配置項目的主機名,端口號
* 配置是否打開瀏覽器
* 代碼檢查工具eslint
在開發(fā)的時候我們主要還是關(guān)注src文件, 后來需要的路由,store,ajaxApi,以及其他組件全部在創(chuàng)建在這個文件夾下
const path = require('path') module.exports = { dev: { // Paths
assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, //添加跨域的配置
// Various Dev Server settings host: 'localhost', // can be overwritten by
process.env.HOST port: 9528, // 配置是否打開瀏覽器 autoOpenBrowser: true, //配置是否打開瀏覽器
errorOverlay: true, notifyOnErrors: false, poll: false, //
https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- // Use
Eslint Loader? // If true, your code will be linted during bundling and //
linting errors and warnings will be shown in the console. useEslint: false, //
If true, eslint errors and warnings will also be shown in the error overlay //
in the browser. showEslintErrorsInOverlay: false,
入口js文件 main.js的主要作用

* 創(chuàng)建vue實例, 關(guān)聯(lián)index.html中id為app的div代碼塊
* 添加項目中的路由模塊 router
* 添加store模塊---vuex
一般做好這不配置之后main就不用再改動了
import App from './App' import router from './router' import store from
'./store' Vue.use(ElementUI, { locale }) new Vue({ el: '#app', router, store,
template: '<App/>', components: { App } })
根組件App.vue

其實每一個組件都可以完整的擁有下面三部分, 當然如果哪個組件中不需要添加css樣式,可以把最后一個style或者script標簽去掉
<template> <div> <!-- 這里存放 --> </div> </template> <//script> export default {
name: 'app' } <///script> <style> </style>
組件間的相互調(diào)用

比如根組件想使用hello.vue組件,怎么做呢?

像下面這樣,三步走

* 第一步:引入組件
* 第二步:將組件映射成target標簽
* 第三步使用標簽 <template> <div> <!--第三步使用標簽--> <hello/> <div/> <template/>
<script> import hello form './XXX/hello.vue' export default{ // 將組件映射成標簽
components:{ hello } } <style> </style>
第二步中引入標簽時也可以去掉.vue后綴

或者直接這樣寫,是從@/ 代表的是 src/
import hello form '@/XXX/hello'
打包與發(fā)布

打包

* 打包的命令: npm run build
項目經(jīng)過打包,產(chǎn)出是一個dist文件,里面分別是index.html 和 靜態(tài)資源文件夾,
這也是前后端分離開發(fā)的特色,后端想控制view層,也難了,只有一張index.html

發(fā)布方法1-靜態(tài)服務(wù)器工具包

命令:
npm install -g serve // 安裝工具 serve dist
發(fā)布方法2-使用tomcat服務(wù)器

注意點,使用tomcat當服務(wù)器,要求文件夾的名字和項目的名字要一樣,修改的步驟如下:

* 修改/build/webpack_prod.conf.js文件 output:{ ... pathPath:'項目名稱' }
* 編譯重新打包 npm run build
* 把打包得到的dist文件夾改名,改成項目名
* 將改名完事后的文件拷貝到tomcat的webapps目錄下,運行tomcat
eslint的編碼規(guī)范檢查

好的習慣就是使用它,規(guī)范自己的代碼風格, 但是也得說一下怎么禁用eslint'

* 方法一: 通過如果是webstorm編譯器的話,點擊file/settings/ , 搜索eslint,可以enable掉
* 方法二: 編輯.eslintignore文件,添加自己想被忽略的文件 *.js *.vue 一般我們就寫這兩部分,這一下子全忽略了
因為eslint有個莫名其妙的要求,代碼最后一行要求是空行,可以通過下面的方法三取消掉

* 方法三: 編輯.eslintrc.js rules:{ ... // 添加 'indent':0 }
父子組件之間數(shù)據(jù)交互

在差分組件的時候,本著多個組件共享的數(shù)據(jù)放在根組件的原則,
于是我們把共用的數(shù)據(jù)放在根組件,于此同時操作這些數(shù)據(jù)的方法也被我們定義在根組件,子組件想要使用這些數(shù)據(jù),想要操作這些數(shù)組怎么辦呢?
想下面那樣,進行組件之間的數(shù)據(jù)傳遞

* 在父組件中給子組件傳遞方法或數(shù)據(jù)
使用:強制數(shù)據(jù)綁定的方法, ChildTarget是我們在components模塊將子組件映射得來的子組件標簽,
name可以是vue中data的方法,也可以是方法
<template> <ChildTarget :name="name"/> </template>
* 子組件取出父組件傳遞過來的值 export default{ props:['name','name2'] }
數(shù)據(jù)的交互@click

最常用的就是使用@click="方法名", 或者@click="value = !value" 或者@click="value = true

如果我們向上面那樣, 把公共的數(shù)據(jù)放在父組件中, 那么事件的觸發(fā)一定是發(fā)生在子組件中, 子組件一般通過@click給模板中的元素綁定上指定的動作,
進而調(diào)用父組件的傳遞進來的方法,操作父組件傳遞進來的值

此外,在所有的組件中,vue的data部分都向下面這樣寫，是規(guī)定
data(){ return{ name:'' } }
* 常用的監(jiān)視watch模塊 watch:{ 監(jiān)視的data中的對象 name:{ deep:true, // 深度監(jiān)視 handler:
function(value){ // value就是變化后的新的值 // todo } } }
* 緩存模塊
從緩存中把去出來的字符串轉(zhuǎn)換成json串
JSON.parse(window.localStorage.getItem('')||'默認值');
把對象,存儲進瀏覽器的緩存
window.localStorage.setItem('自定義的key',JSON.stringfy(value))
消息訂閱,打破父子組件信息傳遞的約束

像上面那樣,如果不存在父子組件的關(guān)系,父組件不引入子組件,也就沒辦法把他映射成標簽, 既然映射不成標簽也就沒法像上面那樣,通過 : 冒號
強制進行數(shù)據(jù)的綁定達到傳遞值的效果,于是有了消息訂閱

組件之間的通信方式: 發(fā)布/訂閱

綁定監(jiān)聽: 訂閱事件

觸發(fā)事件: 發(fā)布事件

借助插件-public.js

安裝命令:
npm install --save pubsub-js
場景: 我們給模板上的按鈕綁定點擊事件,一旦被點解他就發(fā)布事件

* 在使用前需要導入PubSub對象 import PubSub from 'public-js'
使用:消息的發(fā)布
<button @click="search">Search</botton> export default{ methods:{
search(name){ // search是方法名 // name 是攜帶的參數(shù),沒參數(shù)就不用寫
Publish.publish('search',name) } } }
消息的訂閱:

* 依然是第一步:引入PubSub對象
* 編碼實現(xiàn): mounted: { PubSub.subscribe("search",(name)=>{ // todo with name });
異步請求

安裝插件axios
npm install axios --save
* 在使用之間同樣是需要引入: import axios from 'axios'
發(fā)送一個get請求
axios.get(url) .then(res=>{ // todo with res }) .catch(error){ // todo }
路由:

vue是如何做到使后端乖乖交出view層的控制權(quán)的?,難道是直接使用window.location.href = url嗎?

其實學過路由才知道,
使用的是vue-router,一個官方提供的路由框架,可以使用我通過組合組件來組成應(yīng)用程序,仰仗它的路由插件vue-router,我們輕松控制頁面的切換

我們要做的就是將組件components映射到routers,然后告訴vue-router到哪里去渲染他們

定義路由器

安裝插件
npm install vue-router --save
編碼,其實大家都會把關(guān)于路由的編碼單獨放到一個叫router的文件夾中,而且,它的編碼基本上是機械化的編碼,分為如下幾步

* 引入Vue,VueRouter
* 聲明Vue.use(VueRouter)
* 引入路由組件
* 對外暴露路由器對象,并且把路由組件配置進路由器對象
注意點 下面的配置部分, routes 不寫亂寫!!!
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) import
Home from './Home.vue' import About from './About.vue' import Me from
'./Me.vue' export default new VueRouter({ // 添加路由 routes:[ { path:'/home',
component:Home, meta:{ // 添加自定義的字段,可以當成flag,也可以文本 } }, { path:'/about',
component:About, meta:{ // 添加自定義的字段,可以當成flag,也可以文本 }, childred:[ // 嵌套路由 {
path:'/about', component:About, meta:{ // 添加自定義的字段,可以當成flag,也可以文本 } } ] } }, {
path:'', // 默認訪問空的話,重定向到/home redirect:'/home' } ] })
使用路由進行頁面的跳轉(zhuǎn)

原來進行頁面的跳轉(zhuǎn)我們通常使用a標簽,(一般把a標簽設(shè)計成按鈕,或者導航欄的樣子,點擊發(fā)送請求,進而跳轉(zhuǎn)頁面了),
而vue的路由其實和a標簽差不多,我們使用vue的router-link標簽替換a標簽
<router-link to:'/about' class="可以讓我看起來像按鈕的css樣式"> </router-link> <router-link
to:'/home' class="可以讓我看起來像按鈕的css樣式"> </router-link> <router-view ></router-view>
這樣用戶點擊 router-link,就會把相應(yīng)的子組件移植到標簽塊中

補充:

屬性 類型 含義
to string | Location 表示目標路由的鏈接。當被點擊后，內(nèi)部會立刻把?to?的值傳到?router.push()
，所以這個值可以是一個字符串或者是描述目標位置的對象。
replace boolean 設(shè)置?replace?屬性的話，當點擊時，會調(diào)用?router.replace()?而不是?router.push()
，于是導航后不會留下 history 記錄。
append boolean 設(shè)置?append?屬性后，則在當前（相對）路徑前添加基路徑。例如，我們從?/a?導航到一個相對路徑?b，如果沒有配置?
append，則路徑為?/b，如果配了，則為?/a/b
回退到上一個路由

我們可以在按鈕上添加下面的動作,是路由回退一級
<button @click="$router.back()"></button>
緩存路由組件

使用如下標簽包裹我們的router-view,這樣當我們再回退到上一個路由時,用戶加進去的狀態(tài)依然存在
<keep-alive> <router-view ></router-view> </keep-alive>
$router與$route

$router是路由器對象,說白了就是用它去跳轉(zhuǎn)頁面,美其名曰:編程式路由導航

$route是路由對象,說白了就是某一個路由對象,既然是某一個,就不能進行頁面的跳轉(zhuǎn),相反是可以獲取出當前路由組件的屬性,它的結(jié)構(gòu)圖如下:

$route的組成圖



向路由組件傳遞值 一

需求: 我們想發(fā)送這樣的請求 http:localhost:8080/home/1/羊肉串,在路徑上攜帶著參數(shù)1

路由怎么接收參數(shù)呢?--> 使用:占位
export default new VueRouter({ // 添加路由 routes:[ { path:'/home/:id/:type', //
如果想在路徑上傳遞值進來,就使用:占位 component:Home, meta:{ // 添加自定義的字段,可以當成flag,也可以文本 flag:true
} },
當我們添加了/:之后,它的組成結(jié)構(gòu)就變成了這個樣子



像下面這樣傳遞值進去,發(fā)起請求
<router-link to:`/home/${id}/${type}` class="可以讓我看起來像按鈕的css樣式"> </router-link>
同時,我們也可以向下面這樣使用$route. 在對應(yīng)不同的路由組件中,把里面的屬性取出來, 注意啊,這樣取值,前提是我們前面使用
/:id占位,并且也整整傳遞值進去了
<h1>id= {{$route.params.id}}</h1>
向路由組件傳遞值 二

使用<router-view >標簽傳遞值
<router-view msg='abc'></router-view>
在路由組件中通過props取出值,然后可以直接使用
export default{ props:[ msg:String ] }
編程式的路由導航

編程式的路由導航說白了就是,不用router-link標簽轉(zhuǎn)而使用代碼路由的跳轉(zhuǎn)唄,
舉個例子,我們使用手機qq,最下面有幾個導航欄,點擊不同的按鈕轉(zhuǎn)換到不同的頁面去,如果用編程式的路由導航就很好做

* 第一步就是將需要的路由組件配置進路由器
* 給按鈕綁定上點擊事件
* 點擊事件觸發(fā)我們所謂的編程式路由導航
vue提供了兩種編程式的路由導航實現(xiàn)

* 第一種:
這種常用的一種 this.$router.replace(`/home/${id}`)
* 第二種:
這種具有棧的特性,也就是說,用戶點擊返回鍵,會返回到上一級路由 this.$router.push(`/home/${id}`)
slot標簽

它是個和 rout-view 和像的標簽,都是用來占位的,它可以接受父組件傳遞給他的一段html

舉個例子: 有四張路由組件,他們共用一個叫header的組件當作自己的頭部, 但是他們需要傳遞進去屬于自己的不同的值, 下面使用slot實現(xiàn)

在 MyHeader.vue中
<!--首頁頭部--> <header class="header"> <!-- 這里使用插槽占位--> <slot name="left"></slot>
<span"> <span >我是header</span> </span> <!-- 這里使用插槽占位--> <slot
name="right"></slot> </header>
在父組件中使用:注意啊，下面的組件想往MyHeader.vue中的插槽中，傳遞進去代碼片段，前提是他要把MyHeader.vue映射成標簽，成為他的父組件
<div> <MyHeader> <span class="header_search" slot="left"> <i class="iconfont
icon-sousuo"></i> /*在插槽的左邊植入一個icon*/ </span> <!-- 給右邊的插槽傳遞模板 --> <span
class="header_login" slot="right"> <a href="" >登錄|注冊</a> /* 在插槽的右邊植入一個鏈接 */
</span> </MyHeader> </div>
Vuex

官方的解釋: vuex是專門為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式的儲存應(yīng)用中所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)期的方式發(fā)生變化

說白了: 當我們劃分組件之后,每一個組件都有自己的屬性,但是不同的組件的數(shù)據(jù)是不能共享的,于是我們可以使用從父組件往子組件傳播數(shù)據(jù)的模式,
而且完全不相干的兩個組件可能需要對方data里的數(shù)據(jù),又怎么傳遞呢? vuex 就應(yīng)對 迎戰(zhàn)這個問題

vuex就是一個單獨存儲的區(qū)域,用于存放公共的屬性

安裝命令:
npm install --save vuex


創(chuàng)建vuex的四個組件對象,如上圖

vuex的組件對象一: state.js

狀態(tài)對象,存放一系列的狀態(tài),其實就是把子組件中data里面的字段賦復制過來
state.js文件 export default { arr: [] }
vuex的組件對象二: actions.js

超級重要的組件, 在這個組件中我們可以提交異步事件, 最常用的就是用戶直接通過$store.dispatch('action中的方法名'),
action會觸發(fā) mutation的調(diào)用, 間接更新狀態(tài)
action.js // add方法的方法第一個參數(shù)是不變的{commit}, 其實他就是 $store 對象 // 通過這個commit方法,
把數(shù)據(jù)包裝成對象傳遞給 mutations // 第二個參數(shù)的可選的,可以是調(diào)用者傳遞進來的參數(shù),也可以是state對象 export default {
add({commit},item){ // 提交mutation請求 commit(ADD_TODO,{item}); // 把數(shù)據(jù)包裝成對象傳遞給
mutations },
vuex的組件對象三: mutations.js

真正的去執(zhí)行action傳進來,更新state中數(shù)據(jù)的操作
mutations.js export default { add(state,{item}){ state.arr.unshift(item); } }
vuex的組件對象四: getters.js

包含了所有的基于state的 get計算屬性, 這一點也很好用,他是一種雙向的數(shù)據(jù)綁定
getters.js export default { // 計算屬性 totalCount (state) { return
state.arr.length }, }
把四個組件拼裝成store對象

* 在src下創(chuàng)建store文件夾,在改文件夾下創(chuàng)建store.js
* 導入Vue , Vuex
* 聲明Vue使用Vuex
* 將上面的四個組件注冊進來store.js
state: 狀態(tài)對象,存放的是需要共享數(shù)據(jù)的字段
actions: 包含多個事件回調(diào)函數(shù)的對象
mutations: 包含真正去更新state中字段的函數(shù)
getter: 計算屬性的方法
* 對外暴露匿名store對象
* 將store配置進main.js vue的入口js中
編碼實現(xiàn): store.js
store.js import Vue from 'vue' import Vuex from 'vuex' import state from
'./state' import actions from './actions' import mutations from './mutations'
import getters from './getter2' Vue.use(Vuex) // 對外暴露你匿名 store對象 export default
new Vuex.Store({ state, actions, mutations, getters }) 把store對象,注冊進main.js
更全面的數(shù)據(jù)處理流程圖



獲取state中的值

做好了上面的配置,在任何地方都能用下面的方式獲取出store里面的數(shù)據(jù)
this.$store.state.屬性
使用vuex,改變狀態(tài)值

添加上前綴,再使用
this.$store.commit('matations中的方法名','可選的參數(shù)') // 注意哦, action中是可以提交異步函數(shù)的
this.$store.dispach('action中的方法名'，'可選的參數(shù)')
也可以像下面這樣,先進行映射就可以不再添加任何前綴,直接使用他們
// 從vuex中引入映射 import {mapState,mapGetters,mapActions} from 'vuex' export
default { computed:{ ...mapState(['state中的屬性值'])
...mapGetters(['getters.js中的方法名']) }, methods:{
...mapActions(['actions.js中的方法名']) } }

• ? 上一篇：.net必問的面試題系列之基本概念和語法
• ? 下一篇：數(shù)據(jù)結(jié)構(gòu)之紅黑樹-動圖演示(上)