Vue

簡(jiǎn)介

vue是目前前端最具前景的框架之一，能幫助我們快速搭建并開(kāi)發(fā)前端項(xiàng)目。
Vue是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類(lèi)庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。

主要特點(diǎn)

輕量級(jí)的框架：能夠自動(dòng)追蹤依賴(lài)的模板表達(dá)式和計(jì)算屬性，提供 MVVM 數(shù)據(jù)綁定和一個(gè)可組合的組件系統(tǒng)，具有簡(jiǎn)單、靈活的 API，使讀者更加容易理解，能夠更快上手
雙向數(shù)據(jù)綁定：聲明式渲染是數(shù)據(jù)雙向綁定的主要體現(xiàn)，也是 Vue的核心，它允許采用簡(jiǎn)潔的模板語(yǔ)法將數(shù)據(jù)聲明式渲染整合進(jìn) DOM。
指令：Vue與頁(yè)面進(jìn)行交互，主要就是通過(guò)內(nèi)置指令來(lái)完成的，指令的作用是當(dāng)其表達(dá)式的值改變時(shí)相應(yīng)地將某些行為應(yīng)用到 DOM 上
組件化：組件是 Vue最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。
組件還支持熱重載（hotreload）。當(dāng)我們做了修改時(shí)，不會(huì)刷新頁(yè)面，只是對(duì)組件本身進(jìn)行立刻重載，不會(huì)影響整個(gè)應(yīng)用當(dāng)前的狀態(tài)。CSS 也支持熱重載。
客戶(hù)端路由：Vue-router 路由插件與 Vue深度集成，用于構(gòu)建單頁(yè)面應(yīng)用。Vue 單頁(yè)面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪(fǎng)問(wèn)路徑，并將路徑和組件映射起來(lái)，傳統(tǒng)的頁(yè)面是通過(guò)超鏈接實(shí)現(xiàn)頁(yè)面的切換和跳轉(zhuǎn)的。
狀態(tài)管理：狀態(tài)管理實(shí)際就是一個(gè)單向的數(shù)據(jù)流，State 驅(qū)動(dòng) View 的渲染，而用戶(hù)對(duì) View 進(jìn)行操作產(chǎn)生 Action，使 State 產(chǎn)生變化，從而使 View 重新渲染，形成一個(gè)單獨(dú)的組件

SPA和MPA對(duì)比

MPA：多頁(yè)應(yīng)用結(jié)構(gòu)（MultiPage Application, MPA），傳統(tǒng)的項(xiàng)目大多使用，，需要切換內(nèi)容的時(shí)候我們往往會(huì)進(jìn)行單個(gè)html文件的跳轉(zhuǎn)，這個(gè)時(shí)候受網(wǎng)絡(luò)、性能影響，瀏覽器會(huì)出現(xiàn)不定時(shí)間的空白界面，用戶(hù)體驗(yàn)不好。
SPA：單頁(yè)面應(yīng)用（single page application， SPA）用戶(hù)通過(guò)某些操作更改地址欄url之后，動(dòng)態(tài)的進(jìn)行不同模板內(nèi)容的無(wú)刷新切換，用戶(hù)體驗(yàn)好。

Vue中會(huì)使用官方提供的vue-router插件來(lái)使用單頁(yè)面，原理就是通過(guò)檢測(cè)地址欄變化后將對(duì)應(yīng)的路由組件進(jìn)行切換（卸載和安裝）。

基礎(chǔ)流程

1.安裝node

主要用于使用npm包管理器，配置npm的環(huán)境變量

安裝包下載官網(wǎng)地址：https://nodejs.org/zh-cn/（推薦使用長(zhǎng)期LTS版，長(zhǎng)期支持，穩(wěn)定）

注意下載的位數(shù)，默認(rèn)是win10的64位，下載mac，win7，32位等可點(diǎn)擊官網(wǎng)頂部的下載。

直接一直下一步安裝即可，可以更改安裝路徑，但還是建議默認(rèn)路徑安裝。

2.全局安裝腳手架

只需安裝一次即可，兩者都安裝執(zhí)行

安裝

3.X版本安裝 npm install -g @vue/cli低版本安裝 npm install -g @vue/cli-init

在想要?jiǎng)?chuàng)建項(xiàng)目的目錄下打開(kāi)cmd命令行

3.X版本安裝（不會(huì)看到webpack的配置文件） vue create progress-name低版本安裝（會(huì)看到webpack的配置文件，推薦使用） vue init webpack progress-name

安裝步驟詳解
a. 高版本：
a. 系統(tǒng)將提示您選擇預(yù)設(shè)：可以選擇基本Babel + ESLint設(shè)置附帶的默認(rèn)預(yù)設(shè)，也可以選擇“手動(dòng)選擇功能”以選擇所需的功能(推薦選擇第二個(gè)，手動(dòng)選擇)

b. 根據(jù)個(gè)人需要選擇配置項(xiàng)（選擇方法：空格即可）

c. 路由是否選擇history模式（推薦選擇 y，如果選擇n，路由將默認(rèn)為hash模式）
d. selint語(yǔ)法選擇（推薦選擇eslint+standard config:標(biāo)準(zhǔn)模式）

e. 檢測(cè)方式（推薦選擇lint on sava）

f. 文件類(lèi)型（推薦使用json）

g. 保存當(dāng)前的配置為預(yù)設(shè)，以供未來(lái)使用（推薦使用 y）
h. 保存預(yù)設(shè)并命名

b. 低版本：
a. 前面四步都可以一路回車(chē)
b. 第五步詢(xún)問(wèn)是否安裝vue-router，選擇是
c. 第六步使用eslint代碼檢查，根據(jù)個(gè)人情況選擇是或否
d. 第七步設(shè)置單元測(cè)試，選擇否
e. 第八步測(cè)試監(jiān)聽(tīng)，選擇否
f. 第九步選擇npm即可，等待安裝完成

3. 項(xiàng)目目錄文件夾詳解

build 構(gòu)建腳本目錄 config 構(gòu)建配置目錄 node_modules 依賴(lài)包目錄 src 源碼目錄(放置所有的資源文件，一般會(huì)被webpack用來(lái)打包) |-- api 接口，統(tǒng)一管理 |-- assets 靜態(tài)資源，統(tǒng)一管理(如：css，img, js，fonts) |-- components 公用組件，全局文件(放置所有的子組件，即每個(gè)頁(yè)面級(jí)組件的子組件) |-- lib 外部引用的插件存放及修改文件 |-- router 路由，統(tǒng)一管理 | |-- index.js 配置路由信息 |-- store vuex, 統(tǒng)一管理 |-- pages 視圖目錄(所有的頁(yè)面級(jí)組件) | |-- index 視圖模塊名 | |-- |-- api 接口，統(tǒng)一管理 | |-- |-- assets 靜態(tài)資源，統(tǒng)一管理(如：css，img, js) | |-- |-- components 模塊通用組件 | |-- |-- index.vue 入口頁(yè)面 | |-- |-- Home.vue 首頁(yè)頁(yè)面 | |-- |-- My.vue 我的頁(yè)面 |-- App.vue 入口頁(yè)面 |-- main.js 入口js文件(可在此引入公共的樣式等) static 靜態(tài)資源文件（不會(huì)最終被weback打包（一般放置圖片文件和本地模擬的json數(shù)據(jù)）） index.html 入口文件 .env 環(huán)境變量配置文件 .gitignore git忽略配置文件 package.json 項(xiàng)目描述文件 package-lock.json 項(xiàng)目包管控文件 README.md 項(xiàng)目說(shuō)明文件

在package.json文件中，我們可以到開(kāi)發(fā)和生產(chǎn)環(huán)境的配置文件入口。

"scripts": {"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","start": "npm run dev","build": "node build/build.js"}

4. 更改配置

App.vue
插入一個(gè)路由插槽，進(jìn)行頁(yè)面的跳轉(zhuǎn)，顯示不同的路由

<template><router-view></router-view> </template>

main.js
以app做為根組件，每次在路由插槽渲染頁(yè)面

new Vue({el: '#app',router,components: { App },template: '<App/>' }) 改為： new Vue({el: '#app',router,render(h){return h(App)} })

router文件夾的index文件
根據(jù)項(xiàng)目需求，引入對(duì)應(yīng)頁(yè)面，配置路由信息，進(jìn)行頁(yè)面跳轉(zhuǎn)）（ / 代表跟路徑）

import Vue from 'vue' import Router from 'vue-router' import Index from "../pages/Index"; // 首頁(yè) Vue.use(Router);const routes = [{path: '/',name: 'Index',component: Index},{path: '/Index',name: 'Index',component: () => import(/* webpackChunkName: "My" */ '../pages/index/My'),meta: {keepAlive: false,title: '首頁(yè)',}},{/*** 邀請(qǐng)成員加入家庭*/path: '/My',name: 'My',component: () => import(/* webpackChunkName: "My" */ '../pages/index/My'),meta: {keepAlive: false,title: '我的'}},{//缺省值，放最后path: '*',redirect: '/Index'} ]const router = new VueRouter({routes,linkExactActiveClass: "act",mode: "history", })router.beforeEach((to, from, next) => {console.log(to, from)next() }) router.afterEach((to, from) => {console.log(to, from) })export default router

項(xiàng)目啟動(dòng)

3.X版本 npm run serve低版本 npm run dev

項(xiàng)目打包
打包完成后會(huì)生成dist文件夾，項(xiàng)目上線(xiàn)時(shí)，直接將dist文件夾放到服務(wù)器即可。

npm run build

總結(jié)

以上是生活随笔為你收集整理的Vue项目搭建流程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。