一.為什么搭建Vue-Cli

(1).傳統的前端項目結構：

一個項目中有許多html文件，每一個html文件都是相互獨立的，

如果需要在頁面中導入一些外部依賴的組件，就需要在每一個html文件中都需要導入，非常麻煩

(2).現在的前端項目架構

在一個node環境中構建項目，node(前端開發環境)類似于后端的maven

前端改變為單頁面架構（一個項目中只有一個html）

二.node.js安裝

(1).下載

Node.js — Download Node.js?

(2).安裝

?

?

?

安裝成功

(3).測試

?

?三.Vue-Cli搭建

(1).什么是 Vue.js Vue

是一套用于構建用戶界面的漸進式框架。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。 Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成為前端三 大主流框架！

https://v2.cn.vuejs.org/

(2).Vue.js 優點

1.體積小

2.更高的運行效率

3.雙向數據綁定,簡化 Dom 操作 通過 MVVM 思想實現數據的雙向綁定，MVVM 就是將其中的 View 的 狀態和行為抽象化，讓我們將視圖 UI 和業務邏輯分開。

4 生態豐富、學習成本低 市場上擁有大量成熟、穩定的基于 vue.js 的 ui 框架、常用組件！

四.Vue-cli搭建

vue-cli 官方提供的一個腳手架，用于快速生成一個 vue 的項目模板；預先定義 好的目錄結構及基礎代碼，就好比咱們在創建 Maven 項目時可以選擇創建一個 骨架項目，這個骨架項目就是腳手架，我們的開發更加的快速；

需要的環境

Node.js 簡單的說 Node.js 是一個前端 js 運行環境或者說是一個 JS 語言解釋器。

npm npm 是 Node.js 的包管理工具，用來安裝各種 Node.js 的擴展。npm 是 JavaScript 的包管理工具，也是世界上最大的軟件注冊表。

使用 HbuilderX 快速搭建一個 vue-cli 項目

?

出現這個表示創建成功?

?

點擊npm run server

或者在終端輸入指令

?

?創建成功

?

?安裝組件路由

vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建 單頁面應用變得易如反掌。

打開命令行工具，進入你的項目目錄，輸入下面命令。

npm i vue-router@3.5.3

?搭建步驟:

1. 創建 router 目錄

創建 index.js 文件,在其中配置路由

import Vue from 'vue'; import router from 'vue-router'; /* 導入路由 */

import login from '../views/login'; /* 導入其他組件 */

import content from '../components/content'; /* 導入其他組件 */

Vue.use(router) /* 定義組件路由 */

var rout = new router({

routes: [ { path: '/index', name: 'index', component: index },

{ path: '/content', component: content } ] }); //導出路由對象

export default rout;

2.使用路由 首頁 內容

3.在 main.js 中配置路由

import router from './router/index.js' Vue.use(router); new Vue({

el: '#app',

router,

render: h => h(App) })

6.路由傳參 用戶 目標組件獲取地址參數

this.$route.query.num

?

import Vue from 'vue';
import router from 'vue-router'; /* 導入路由 */
//導入注冊組件
import Login from '../Login.vue';
import Main from '../Main.vue';
import MajorList from  '../view/major/MajorList.vue';
import StudentList from  '../view/student/StudentList.vue';
//注冊 定義組件訪問地址
Vue.use(router)/* 定義組件路由 */
var rout = new router({
routes: [{path: "/",component: Login},{
path: '/login',
component: Login
},
{
path: '/main',
component: Main,
children:[{path: '/majorlist',component: MajorList},{path: '/studentlist',component: StudentList}
]
}
]
});//導出路由對象
export default rout;