vue2.0開(kāi)發(fā)實(shí)踐總結(jié)之入門(mén)篇

更新時(shí)間：2016年12月06日 08:36:23 作者：beidan

這篇文章主要為大家總結(jié)了vue2.0開(kāi)發(fā)實(shí)踐之入門(mén),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

vue2.0 據(jù)說(shuō)也出了很久了，博主終于操了一次實(shí)刀。

整體項(xiàng)目采用 vue + vue-router + vuex （傳說(shuō)中的vue 全家桶），構(gòu)建工具使用尤大大推出的vue-cli

項(xiàng)目是圖片分享社交平臺(tái)。

項(xiàng)目預(yù)覽：

1 .vue-cli構(gòu)建工具必知

我選用的vue-cli 是基于webpack的版本，不了解webpack的可以先粗略看下下面的基本知識(shí)

webpack 基本知識(shí)點(diǎn)：

entry：入口點(diǎn)，webpack會(huì)從入口點(diǎn)設(shè)置的js文件開(kāi)始對(duì)項(xiàng)目進(jìn)行構(gòu)建，過(guò)程中，所有入口點(diǎn)通過(guò)import或者require依賴的包，都會(huì)被打包到output中制定的文件和路徑；

output：中設(shè)置打包好的文件的輸出路徑還有文件名；

module：主要是loaders，loaders是webpack進(jìn)行打包的解析器，css、vue、babel、scss都需要用npm安裝相應(yīng)的loader，webpack才能對(duì)該格式的文件進(jìn)行解析和處理；

plugins：是一些webpack的打包插件，跟解析的語(yǔ)言無(wú)關(guān)，用來(lái)輔助構(gòu)建，提供豐富的附加功能。

vue-cli 安裝

1）. 首先，安裝 vue-cli。(確保你有 node 和 npm)

npm i -g vue-cli

2）.創(chuàng)建一個(gè) webpack 項(xiàng)目并且下載依賴

vue init webpack demo
cd demo
npm i

3）. 運(yùn)行

npm run dev 
 //npm run xxx 是執(zhí)行配置在package.json中的腳本
e.g: 它會(huì)去找到package.json的scripts對(duì)象，執(zhí)行node bulid/dev-server.js

4）. 構(gòu)建

npm run dev //運(yùn)行結(jié)束后，在當(dāng)前目錄下會(huì)在生成 dist 目錄，將dist目錄放在服務(wù)器上，使用服務(wù)器上訪問(wèn)index.html的url即可

若打包之后，項(xiàng)目的靜態(tài)文件出現(xiàn)引用路徑問(wèn)題，可于項(xiàng)目目錄 config/index.js 修改以下數(shù)據(jù)

module.exports = {
build:{
 assetsSubDirectory: 'static', //修改這里成你項(xiàng)目放置靜態(tài)文件的目錄
 assetsPublicPath: './', //修改這里成你項(xiàng)目放置靜態(tài)文件的目錄
 }
}

在靜態(tài)文件 index.html 文件下，引用靜態(tài)文件

vue支持scss 配置

1）.安裝以下模塊

npm install node-sass --save-dev
npm install sass-loader --save-dev 

//--save-dev 會(huì)將該依賴寫(xiě)入package.json，方便別人安裝依賴

2）.打開(kāi)webpack.base.config.js在loaders里面加上

 {
 test: /\.scss$/,
 loaders: ["style", "css", "sass"]
 }

3）.在需要用到scss的地方寫(xiě)上

2. 項(xiàng)目整體架構(gòu)

項(xiàng)目整體目錄如下

package.json

--build 
--config 
--dist //npm run build 之后再生成的目錄
--src 
 --components // 用于存放組件
 --page //頁(yè)面組件，由vue-router引入
 --router //路由
 --store // 數(shù)據(jù)流管理
 main.js //入口文件
 app.vue //主組件 
--static //靜態(tài)文件目錄
.babelrc 
.gitignore //git忽略上傳文件
index.html //靜態(tài)文件入口

main.js

入口文件，主要作用是初始化vue實(shí)例并使用需要的插件

import Vue from 'vue'
import router from './router/router'
import store from './store/store'

Vue.config.debug = true //開(kāi)啟debug模式
window.log = console.log
let data = {
 router,
 store
}
new Vue(data).$mount('#app') 

 //創(chuàng)建一個(gè)app實(shí)例，并且掛載到選擇符#app匹配的元素上 在根目錄html里面

掛載到#app ，此處看一下尤大大給的生命周期圖，以下的意思是，假如new vue 的時(shí)候，有顯示的 el 屬性

 let data = {
 el:'#app', 
 router,
 store
}

則無(wú)須手動(dòng)掛載到選擇符#app匹配的元素上

app.vue

app.vue是我們的主組件，所有頁(yè)面都是在App.vue下進(jìn)行切換的,由于app.vue在所有頁(yè)面都有，我們將會(huì)在app.vue上面寫(xiě)一些初始化全局方法。

考慮到組件 header，footer，loading動(dòng)畫(huà)基本整個(gè)項(xiàng)目都會(huì)使用到，app.vue代碼如下

<template>
 <div class="com-app">
 <com-header></com-header> 
 <transition :name="transitionName">
 <router-view class="child-view"></router-view>
 </transition>
 <com-footer v-show="isFooter"></com-footer>
 <com-loading v-show="loading"></com-loading>
 </div>
</template>

由于footer，loading在整個(gè)項(xiàng)目中會(huì)頻繁地改變，故v-show

v-if 如果條件為false，它什么也不做，加載速度較快。當(dāng)條件為真時(shí)，v-if 才會(huì)真正編譯渲染頁(yè)面結(jié)構(gòu)
v-show 渲染頁(yè)面結(jié)構(gòu)后，通過(guò) "display:none" 控制元素狀態(tài)

router 根據(jù)不同路由跳轉(zhuǎn)目錄,按需加載相應(yīng)的組件

const routes = [
 {
 path: '/',
 component: App,
 children: [
 {path: '/index/:type', name: 'index', component: Index},
 {path: '/home', name: 'home', component: Home},
 {path: '/HomeUserInfo/:uid', name: 'homeUserInfo', component: HomeUserInfo},
 {path: '/article/:id', name: 'article', component: Article},
 {path: '/addmsg', name: 'addMsg', component: AddMsg},
 {path: '/search/:types', name: 'searchresult', component: SearchResult},
 {path: '/login', name: 'login', component: Login},
 {path: '/register', name: 'register', component: Register},
 {path: '/modif', name: 'Modifi', component: Modifi},
 {path: '/admin', name: 'Admin', component: Admin}
 ]
 }
]
const router = new VueRouter({
 routes: routes, // short for routes: routes
 linkActiveClass: 'active', // router-link的選中狀態(tài)的class，也有一個(gè)默認(rèn)的值
 history: true
})