windows10下，零基礎學習VUE（2）-- vue的基本構架和demo

安裝目錄的基本構架

腳手架搭建好的目錄的基本構架，這個博客寫的很清楚，直接使用他的內容。

1.build

• [webpack配置]
• build文件主要是webpack的配置，主要啓動文件是dev-server.js，當咱們輸入npm run dev首先啓動的就是dev-server.js，它會去檢查node及npm版本，加載配置文件，啓動服務。

2.config

• [vue項目配置]
• config文件主要是項目相關配置，咱們經常使用的就是當端口衝突時配置監聽端口，打包輸出路徑及命名等

3.node_modules

• [依賴包]
• node_modules裏面是項目依賴包，其中包括不少基礎依賴，本身也能夠根據須要安裝其餘依賴。
• 安裝方法爲打開cmd，進入項目目錄，輸入npm install [依賴包名稱],回車。

• 在兩種狀況下咱們會本身去安裝依賴：

  • 項目運行缺乏該依賴包：例如項目加載外部css會用到的css-loader，路由跳轉vue-loader等（安裝方法示例：npm install css-loader）（
  • 安裝插件：如vux（基於WEUI的移動端組件庫），vue-swiper（輪播插件）
  • 注：有時會安裝指定依賴版本，需在依賴包名稱後加上版本號信息，如安裝11.1.4版本的vue-loader，輸入npm install vue-loader@11.1.4

4.src

• [項目核心文件]
• main.js，App.vue,及router的index.js

4.1 index.html

• [主頁]
• index.html如其餘html同樣，但通常只定義一個空的根節點，在main.js裏面定義的實例將掛載在根節點下，內容都經過vue組件來填充

4.2 App.vue

• [根組件]
• 一個vue頁面一般由三部分組成:模板(template)、js(script)、樣式(style)

• 【template】

  • 其中模板只能包含一個父節點，也就是說頂層的div只能有一個（例以下圖，父節點爲#app的div，其沒有兄弟節點）
  • <router-view></router-view>是子路由視圖，後面的路由頁面都顯示在此處打一個比喻吧,<router-view>相似於一個插槽，跳轉某個路由時，該路由下的頁面就插在這個插槽中渲染顯示【script】vue一般用es6來寫，用export default導出，其下面能夠包含數據data，生命週期(mounted等)，方法(methods)等，具體語法請看vue.js文檔，在後面我也會經過例子來講明。

• 【style】

  • 樣式經過style標籤<style></style>包裹，默認是影響全局的，如需定義做用域只在該組件下起做用，需在標籤上加scoped，<style scoped></style>

  • 如要引入外部css文件，首先需給項目安裝css-loader依賴包，打開cmd，進入項目目錄，輸入npm install css-loader,回車。安裝完成後，就能夠在style標籤下import所需的css文件，例如：

    <style>
            import './assets/css/public.css'
        </style>

  • 這樣，咱們就能夠把style下的樣式封裝起來，寫到css文件夾，再引入到頁面使用，整個vue頁面也看上去更簡潔。

4.3 main.js

• [入口文件]
• main.js主要是引入vue框架，根組件及路由設置，而且定義vue實例
• 下圖中的components:{App}就是引入的根組件App.vue後期還能夠引入插件，固然首先得安裝插件。

4.4 router

• [路由配置]
• router文件夾下，有一個index.js，即爲路由配置文件

• 這裏定義了路徑爲'/'的路由，該路由對應的頁面是Hello組件，因此當咱們在瀏覽器url訪問http://localhost:8080/#/時就渲染的Hello組件

---

demo的構建

根據上述的結構和（1）的構建，造成以下的樹狀目錄：

總結下項目架構的各個關係：

• index.html爲主頁，直接引入了app.vue的實例，也就是 id='app'的這個app，由腳手架自動生成，暫時不進行修改。
• src/main.js 指明 這個app實例使用的 vue組件,以及該組件的構成，如router，components等等。

• src/App.vue 當前做用主要由三個：

  • 指定路由視圖
  • 主要js腳本，當前暫時沒有使用到
  • 引入外部css樣式，定義全局css樣式

• src/router.js 引入各個不一樣頁面的子組件，並註冊到不一樣的路徑上去

• src/components 存放公共組件，這裏因爲第一次作，把兩個視圖組件也放在了這裏，不過問題不大。
• src/views 存放視圖組件，主要是router.js中各個路由視圖的構成，這裏應該存放的是 HelloWorld.vue，Manage.vue，Index.vue

---

正在編輯中。。。。。