Vue-Cli

組件開發自動化工具

Node.js是一個新的後端(後臺)語言，它的語法和JavaScript相似，因此能夠說它是屬於前端的後端語言

運行環境：後端語言通常運行在服務器端，前端語言運行在客戶端的瀏覽器上

功能：後端語言能夠操做文件，能夠讀寫數據庫，前端語言不能操做文件，不能讀寫數據庫。

• Node.js若是安裝成功，能夠查看Node.js的版本,在終端輸入以下命令

1 2	node -v npm

• 全局安裝vue腳手架，vue-cli，這玩意兒能夠自動生成項目模板

1 2	vue-cli cnpm install --global vue-cli

單頁應用 SPWA

單頁Web應用（single page web application，SPWA），就是將系統全部的操做交互限定在一個web頁面中。

單頁應用程序 (SPA)是加載單個HTML頁面，系統的不一樣功能經過加載不一樣功能組件的形式來切換，不一樣功能組件所有封裝到了js文件中，這些文件在應用開始訪問時就一塊兒加載完；

整個系統在切換不一樣功能時，頁面的地址是不變的，系統切換能夠作到局部刷新，也能夠叫作無刷新，這麼作的目的是爲了給用戶提供更加流暢的用戶體驗

• 經過vue-cli腳手架開啓一個項目：

1	vue init webpack myproject

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

- Project name: 項目名稱，若是不須要就直接回車。注：此處項目名不能使用大寫。 - Project description: 項目描述，直接回車 - Author：做者 - vue build: 構建方式 默認便可 - install vue-router? 是否安裝vue的路由插件 - Use ESLint to lint your code? 是否使用ESLint檢測你的代碼？ （ESLint 是一個語法規則和代碼風格的檢查工具，能夠用來保證寫出語法正確、風格統一的代碼。） - Pick an ESLint preset:選擇分支風格 1.standard(https://github.com/feross/standard) js的標準風格 2.Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法，這個github 地址說是JavaScript最合理的方法 3.none (configure it yourself) 本身配置 - Setup unit tests? 是否安裝單元測試 - Pick a test runner 選擇一個單元測試運行器 1.Jest（Jest是由Facebook發佈的開源的、基於Jasmine的JavaScript單元測試框架） 2.Karma and Mocha 3.none - Setup e2e tests with Nightwatch(Y/n)?是否安裝E2E測試框架NightWatch （E2E，也就是End To End，就是所謂的「用戶真實場景」。） - Should we run 'npm install' for you after the project has been created? 項目建立後是否要爲你運行「npm install」? yes,use npm(使用npm) yes,use yarn(使用yarn) no,I will handle that myself(本身操做)

• 啓動開發服務器：

1 2 3

cd myproject # 進入目錄 cnpm install # 安裝依賴 cnpm run dev # 開啓服務

vue啓動服務以後，是經過一個小型的express服務進行測試開發環境部署，在這個服務中，主要是經過webpack-dev-middleware和webpack-hot-middleware這兩個中間件完成，而且會在每次代碼對於src目錄下的代碼進行修改時，服務端會動態檢測並讓瀏覽器自動刷新

• 項目目錄介紹

1 2 3 4 5 6

- src # 主開發目錄，全部的單文件組件都會放在這個目錄下 - static # 項目靜態目錄，全部的css、js都會放在這個文件夾下 - dist # 項目打包發佈文件夾，最後要上線單文件夾項目都在這個文件夾中 - node_modules # node的包目錄 - config # 配置目錄，主要用於區分開發環境，測試環境，線上環境的不一樣 - build # 項目打包時依賴的目錄

組件開發

將一個組件相關的html結構，css樣式，以及交互的JavaScript代碼從html文件中剝離出來，合成一個文件，這種文件就是單文件組件，至關於一個組件具備告終構、表現和行爲的完整功能，方便組件之間隨意組合以及組件的重用，這種文件的擴展名爲.vue，好比：menu.vue

組件文件通常定義在src目錄下的components文件夾裏

• template標籤訂義HTML部分

1 2 3 4 5 6 7 8

<teamplate> <div class="" @click=""> <label> 帳號 <input type="text"> </label> </div> </teamplate>

• js寫成模塊導出的形式

1 2 3 4 5 6 7 8 9

// 使用export default命令，爲模塊指定默認輸出 export default{ data: function(){ return { name:"張三", age:16, } } }

• 樣式中的編寫，若是含有scope關鍵字，表示這些樣式是組件局部的，

1 2 3 4 5 6 7 8

<style scoped> .beauty{ width:100px; line-height:50px; border-bottom:1px solid #ddd; margin:0px auto; } </style>

路由配置

當擁有一個組件文件時，要在項目的src目錄下的router目錄下的index.js文件下

進行組件的路由加載配置

在導入組件文件時，能夠使用@符號，表明從src目錄起

好比：import index from ‘@/components/index’

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import first from '@/components/first' // 從組件目錄下導入組件文件，不須要加後綴 import index from '@/components/index' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/', component: index, }, { path: '/first', // 訪問路徑 component: first } ] })

當配置好路由以後，須要在最主要的App.Vue文件下進行鏈接引入

經過<router-link to="鏈接地址">首頁</router-link>標籤進行鏈接引入

經過<router-view></router-view>標籤進行路由加載，能夠簡寫爲：<router-view/>

1 2 3 4 5 6 7 8 9 10 11 12 13

<template> <div id="app"> <router-link to="/">首頁</router-link> <router-link to="/first">第一個頁面</router-link> <router-view></router-view> </div> </template> <script> </script> <style> </style>

在App.Vue文件下的template標籤處若是已經引入了其餘跳轉鏈接；

那麼在子組件的template部分不須要在進行引入

總結

1. 編寫components組件
2. index.js配置路由
3. 在主入口App.vue中加載路由組件<router-view/>，通常默認已經寫好