使用vue2構建項目的完成流程Ⅰ

使用vue構建項目

---

項目介紹：本項目爲vue2開發，旨在從零開始，完成構建項目的一個完整的流程，加深對vue的認識。本項目爲一個手機新聞站點

1、基本流程總述

1、規劃組件結構

Nav.vue
Header.vue
Home.vue
…

2、編寫對應路由

vue-router

3、具體每個組件的功能

建議：一些公共文件jquery，一般放在index.html中引入

4、項目需要的模塊

vuex
vue-router
axios

2、環境配置

在配置環境之前，首先確保電腦開發環境正常，可以進行測試，我的開發平臺是mac，並且確保你的電腦vue-cli是可以用的。

vue−v node -v
$ npm -v

3、關於vue-cli

4、關於vue-router

前端路由->在web開發中，路由是指根據不同的url分配到對應的處理程序。
vue-router->通過管理url，實現url和組件的對應，和通過url進行組件之間的轉換。

路由目前用於單頁應用，SPA，進行加載單個HTML頁面，並在用戶於應用程序交互是，更新頁面

使用步驟

1、安裝模塊

npm install vue-router –save

2、引入模塊

import – VueRouter from ‘vue-router’

3、創建路由實例對象

new VueRouter({
..配置參數
})

4、注入Vue選項參數

new Vue({
router
})

5、告訴路由渲染的位置

<router-view></router-vier>

router-link配置：

可以在router-link間配置在前臺顯示的dom的原型（tag標籤），例如：

<router-link :to="index" tag="div" active-class="class">
    <i class="fa fa-home"></i>
    <span>主頁</span>
</router-link><router-view></router-vier>

router-link默認是點擊事件，如果我們想改變他的觸發方式，可以在router-link中添加event，event爲預留配置項

<router-link event="mouseover"></router-link>

然後新建一個項目，在這裏我使用的是webpack-simple這個腳手架

$ vue init webpack-simple vue_news_demo
cd vue_news_demo
npm install
npm run dev

在執行完成上述命令後，可以在瀏覽器中看到如下場景，證明項目環境構建成功。

然後進行相應的模塊下載，

$ npm install vuex vue-router axios

然後環境已經構建成功可以進行頁面的編輯了。

文件結構

vue-news-demo
|–node_modules ->模塊
|–src
|–assets ->靜態資源 img css js
|–components ->所有的組件

開發過程

如果想在js裏面引入css模塊，需要在webpack-comfig裏面配置style-loader和css-loader,並且安裝相應的loader
z