vue2.0 開發實踐總結之入門篇

vue2.0 據說也出了很久了，博主終於操了一次實刀。 

整體項目采用  vue +  vue-router +  vuex （傳說中的vue 全家桶 ），構建工具使用尤大大推出的vue-cli

 

后續文章：如果有興趣，可以移步  vue2.0 開發實踐總結之疑難篇

 

項目是圖片分享社交平台。   項目預覽：

 

 

1 .vue-cli構建工具必知 

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

 

webpack 基本知識點：

entry：入口點，webpack會從入口點設置的js文件開始對項目進行構建，過程中，所有入口點通過import或者require依賴的包，都會被打包到output中制定的文件和路徑；

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

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

plugins：是一些webpack的打包插件，跟解析的語言無關，用來輔助構建，提供豐富的附加功能。

 

vue-cli 安裝

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

npm i -g vue-cli

2.創建一個 webpack 項目並且下載依賴

vue init webpack demo
cd demo
npm i

3. 運行

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

4. 構建

npm run dev   //運行結束后，在當前目錄下會在生成 dist 目錄，將dist目錄放在服務器上，使用服務器上訪問index.html的url即可

若打包之后，項目的靜態文件出現引用路徑問題，可於項目目錄 config/index.js 修改以下數據

1 module.exports = {
2  build:{
3     assetsSubDirectory: 'static',  //修改這里成你項目放置靜態文件的目錄
4     assetsPublicPath: './',     //修改這里成你項目放置靜態文件的目錄
5  }
6 }

在靜態文件 index.html 文件下， 引用靜態文件

1 <link rel="stylesheet" href="static/css/icon/iconfont.css"/>

 

vue支持scss 配置

1.安裝以下模塊

npm install node-sass --save-dev
npm install sass-loader --save-dev   //--save-dev 會將該依賴寫入package.json，方便別人安裝依賴

 

2.打開webpack.base.config.js在loaders里面加上

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

 

3.在需要用到scss的地方寫上

<style lang="scss"> </style>

 

2. 項目整體架構 

項目整體目錄如下

 1 --build   
 2 --config  
 3 --dist   //npm run build 之后再生成的目錄
 4 --src  
 5   --components   // 用於存放組件
 6   --page    //頁面組件，由vue-router引入
 7   --router  //路由
 8   --store   // 數據流管理
 9   main.js   //入口文件
10   app.vue   //主組件 
11 --static   //靜態文件目錄
12 .babelrc    
13 .gitignore  //git忽略上傳文件
14 index.html  //靜態文件入口
15 package.json

 

main.js

入口文件，主要作用是初始化vue實例並使用需要的插件

 1 import Vue from 'vue'
 2 import router from './router/router'
 3 import store from './store/store'
 4 
 5 Vue.config.debug = true  //開啟debug模式
 6 window.log = console.log
 7 let data = {
 8   router,
 9   store
10 }
11 new Vue(data).$mount('#app')    //創建一個app實例，並且掛載到選擇符#app匹配的元素上   在根目錄html里面

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

 

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

則無須手動掛載到選擇符#app匹配的元素上

 

app.vue

app.vue是我們的主組件，所有頁面都是在App.vue下進行切換的,由於app.vue在所有頁面都有，我們將會在app.vue上面寫一些初始化全局方法。

考慮到 組件 header，footer，loading動畫基本整個項目都會使用到，app.vue代碼如下

 1 <template>
 2   <div class="com-app">
 3     <com-header></com-header>    
 4     <transition :name="transitionName">
 5       <router-view class="child-view"></router-view>
 6     </transition>
 7     <com-footer v-show="isFooter"></com-footer>
 8     <com-loading v-show="loading"></com-loading>
 9   </div>
10 </template>

由於footer，loading在整個項目中會頻繁地改變，故v-show

v-if       如果條件為false，它什么也不做，加載速度較快。當條件為真時，v-if 才會真正編譯渲染頁面結構

v-show 渲染頁面結構后，通過 "display:none" 控制元素狀態

  

router    根據不同路由跳轉目錄,按需加載相應的組件

 1 const routes = [
 2   {
 3     path: '/',
 4     component: App,
 5     children: [
 6       {path: '/index/:type', name: 'index', component: Index},
 7       {path: '/home', name: 'home', component: Home},
 8       {path: '/HomeUserInfo/:uid', name: 'homeUserInfo', component: HomeUserInfo},
 9       {path: '/article/:id', name: 'article', component: Article},
10       {path: '/addmsg', name: 'addMsg', component: AddMsg},
11       {path: '/search/:types', name: 'searchresult', component: SearchResult},
12       {path: '/login', name: 'login', component: Login},
13       {path: '/register', name: 'register', component: Register},
14       {path: '/modif', name: 'Modifi', component: Modifi},
15       {path: '/admin', name: 'Admin', component: Admin}
16     ]
17   }
18 ]
19 const router = new VueRouter({
20   routes: routes, // short for routes: routes
21   linkActiveClass: 'active',  // router-link的選中狀態的class，也有一個默認的值
22   history: true
23 })