Vue

簡介

vue是目前前端最具前景的框架之一，能幫助我們快速搭建并開發前端項目。
Vue是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。

主要特點

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

SPA和MPA對比

MPA：多頁應用結構（MultiPage Application, MPA），傳統的項目大多使用，，需要切換內容的時候我們往往會進行單個html文件的跳轉，這個時候受網絡、性能影響，瀏覽器會出現不定時間的空白界面，用戶體驗不好。
SPA：單頁面應用（single page application， SPA）用戶通過某些操作更改地址欄url之后，動態的進行不同模板內容的無刷新切換，用戶體驗好。

Vue中會使用官方提供的vue-router插件來使用單頁面，原理就是通過檢測地址欄變化后將對應的路由組件進行切換（卸載和安裝）。

基礎流程

1.安裝node

主要用于使用npm包管理器，配置npm的環境變量

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

注意下載的位數，默認是win10的64位，下載mac，win7，32位等可點擊官網頂部的下載。

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

2.全局安裝腳手架

只需安裝一次即可，兩者都安裝執行

安裝

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

在想要創建項目的目錄下打開cmd命令行

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

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

b. 根據個人需要選擇配置項（選擇方法：空格即可）

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

e. 檢測方式（推薦選擇lint on sava）

f. 文件類型（推薦使用json）

g. 保存當前的配置為預設，以供未來使用（推薦使用 y）
h. 保存預設并命名

b. 低版本：
a. 前面四步都可以一路回車
b. 第五步詢問是否安裝vue-router，選擇是
c. 第六步使用eslint代碼檢查，根據個人情況選擇是或否
d. 第七步設置單元測試，選擇否
e. 第八步測試監聽，選擇否
f. 第九步選擇npm即可，等待安裝完成

3. 項目目錄文件夾詳解

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

在package.json文件中，我們可以到開發和生產環境的配置文件入口。

"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
插入一個路由插槽，進行頁面的跳轉，顯示不同的路由

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

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

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

router文件夾的index文件
根據項目需求，引入對應頁面，配置路由信息，進行頁面跳轉）（ / 代表跟路徑）

import Vue from 'vue' import Router from 'vue-router' import Index from "../pages/Index"; // 首頁 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: '首頁',}},{/*** 邀請成員加入家庭*/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

項目啟動

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

項目打包
打包完成后會生成dist文件夾，項目上線時，直接將dist文件夾放到服務器即可。

npm run build

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。