vue腳手架
1 vue腳手架的概念
Vue腳手架（Vue Scaffolding）是Vue.js**官方提供的一個工具，專門用於快速搭建單頁面應用（SPA）的專案結構。它透過命令列介面（CLI）提供了一套標準化的開發流程，包括專案初始化、自動化構建、本地開發伺服器、元件和外掛支援等功能，幫助開發者更加專注於業務邏輯的實現，提高開發效率。12
Vue腳手架是一個整合了專案初始化、自動化構建、本地開發伺服器、元件和外掛支援等功能的工具，旨在幫助開發者快速搭建Vue.js專案，提高開發效率
2 vue腳手架的建立
2.1 vue腳手架的安裝
-g 表示的全域性安裝
npm install -g @vue/cli
2.2 建立Vue腳手架工程
想把專案建立在哪裡，就在哪裡執行以下的命令
vue create xxx專案名
出現以下介面說明構建成功
進入專案執行命令執行程式
cd myvue
npm run serve
啟動成功後出現
訪問本地的http://localhost:8080/
關閉服務用Ctrl+C
2.3 Vue腳手架的檔案結構說明
3 修改預設配置
在main.js中定義一個方法 info() 此方法沒有呼叫 伺服器啟動報錯
這樣不方便開發
配置vue.config.js
新增：
lintOnSave:false
4 標籤的 ref屬性
4.1 ref介紹
可以透過ref獲取Dom元素
js中是透過document.getElementById("id")獲取Dom元素
在vue中可以使用ref來替換上面js獲取Dom元素
應用在html標籤上獲取的是Dmo元素，應用在元件標籤上的是元件例項物件(vc)
使用方法:
<h1 ref="xxx"></h1>或<元件 ref="xxx"></元件>
獲取 :this.$refs.xxx
4.1示範
編寫一個Person.vue元件，
<template>
<div class="person">
<h1>姓名：{{name}}</h1>
<h1>年齡：{{age}}</h1>
</div>
</template>
<script>
export default {
name:"Person",
data(){
return{
name:"gqk",
age:18
}
}
}
</script>
<style>
.person{
background-color: pink;
}
</style>
在App.vue中引入
<template>
<div id="app">
<h1 ref="title">{{msg}}</h1>
<button ref="btn" @click="showDom">點選輸出Dom元素</button>
<Person ref="person"></Person>
</div>
</template>
<script>
import Person from './components/Person.vue' //匯入Person.vue
export default {
name: 'App',
components: {
Person
},
data(){
return{
msg:"歡迎來到java05班學習",
}
},
methods:{
showDom(){//透過ref獲取dom元素或元件物件
console.log(this.$refs.title)
console.log(this.$refs.btn)
console.log(this.$refs.person)
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
點選按鈕觀察控制檯
5 props配置
讓元件接收外部傳遞過來的資料,從而達到元件複用的目的
Person.vue
<template>
<div class="person">
<h1>{{msg}}</h1>
<h2>姓名：{{name}}</h2>
<h2>性別：{{sex}}</h2>
<h2>年齡：{{age+1}}</h2>
</div>
</template>
<script>
export default {
name:"Person",
data(){
return{
msg:"個人簡介"
}
},
props:['name','sex','age']
}
</script>
<style>
.person{
background-color: pink;
}
</style>
App.vue
<template>
<div id="app">
<h1 ref="title">{{msg}}</h1>
<button ref="btn" @click="showDom">點選輸出Dom元素</button>
<Person ref="person" name="gqk" sex="男" :age="18"></Person>
</div>
</template>
<script>
import Person from './components/Person.vue'
export default {
name: 'App',
components: {
Person
},
data(){
return{
msg:"歡迎來到java05班學習",
}
},
methods:{
showDom(){
console.log(this.$refs.title)
console.log(this.$refs.btn)
console.log(this.$refs.person)
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
除了以上配置還可以配置引數的型別，預設值
props:{
name:{
type:String,
require:true,
default:"老王"
},
age:String,
sex:"男"
}
6 mixin混入
6.1 區域性混入
示範：
Person.vue中有一個方法
methods:{
showInfo(){
alert(this.name)
}
}
<template>
<div class="person">
<h1>{{msg}}</h1>
<h2 @click="showInfo">姓名：{{name}}</h2>
<h2>性別：{{sex}}</h2>
<h2>年齡：{{age+1}}</h2>
</div>
</template>
<script>
export default {
name:"Person",
data(){
return{
msg:"個人簡介"
}
},
props:{
name:{
type:String,
require:true,
default:"老王"
},
age:String,
sex:"男"
},
methods:{
showInfo(){
alert(this.name)
}
}
}
</script>
<style>
.person{
background-color: pink;
}
</style>
Student.vue中也有一個
methods:{
showInfo(){
alert(this.name)
}
}
<template>
<div class="stu">
<h2 @click="showInfo">學生姓名：{{name}}</h2>
<h2>學生簡介：{{info}}</h2>
</div>
</template>
<script>
export default {
name:"Stu",
data(){
return{
name:"姜萌",
info:"java05班學生"
}
},
methods:{
showInfo(){
alert(this.name)
}
}
}
</script>
<style>
.stu{
background-color: green;
}
</style>
當元件中有相同方法的時候可以對其進行抽取出來（一個公共的js程式碼）重複使用
在根目錄下建立一個mixin.js
export const hunhe={
methods:{
showInfo(){
alert(this.name)
}
}
}
在模組中使用（Student.vue）
<template>
<div class="stu">
<h2 @click="showInfo">學生姓名：{{name}}</h2>
<h2>學生簡介：{{info}}</h2>
</div>
</template>
<script>
import { hunhe } from '@/mixin';
export default {
name:"Stu",
data(){
return{
name:"姜萌",
info:"java05班學生"
}
},
mixins:[hunhe]
}
</script>
<style>
.stu{
background-color: green;
}
</style>
6.2 全域性混入
匯入一次可在所有元件中使用混入檔案。
在main.js中新增全域性混入
import Vue from 'vue'
import App from './App.vue'
import { hunhe } from './mixin'
Vue.config.productionTip = false
Vue.mixin(hunhe)
new Vue({
render: h => h(App),
}).$mount('#app')
7 外掛
功能:用於增強Vue
本質：包含install方法的一個物件，install的第一個引數就是Vue，第二個以後的引數是外掛使用者傳遞的資料。
定義外掛
物件.install=function(Vue,options){
//1.新增全域性過濾器
Vue.filter(...)
//2.新增全域性指令
Vue.directive(...)
//3.配置全域性混入
Vue.minxin(...)
//4.新增例項方法
Vue.prototype.xxx=function(){
.....
}
Vue.prototype.xxx=(...)=>{
......
}
}
建立一個plugins.js檔案
export default{
install(Vue,x,y,z){
console.info("x: "+x)
console.info("y: "+y)
console.info("z: "+z)
//全域性過濾器
Vue.filter('mySlice',function(value){
console.log(x+y+z)
return value.slice(0,4)
})
//全域性混入
Vue.mixin({
data(){
return{
x:100,
y:100
}
}
})
//給Vue原型上新增方法
Vue.prototype.hello=()=>{
alert("Hello Vue");
}
}
}
在main.js中使用外掛
import plugins from './plugins'
//使用外掛
Vue.use(plugins,1,2,3)
在vue中可以呼叫方法
<template>
<div class="stu">
<h2 >學生姓名：{{name}}{{x}}{{y}}</h2>
<h2>學生簡介：{{info|mySlice}}</h2>
<h2 @click="hello">學生說</h2>
</div>
</template>
<script>
export default {
name:"Stu",
data(){
return{
name:"姜萌",
info:"java05班學生"
}
},
}
</script>
8 反向代理
在解決ajax跨域問題時，後端人員經常會配置CORS解決跨域，但是作為前端，我們也可以透過自己的反向代理的方式解決跨域，這樣就不用麻煩後端開發人員。
先啟動後端伺服器：
啟動成功後：
編寫axios 前提下載安裝axios（npm i axios）
<template>
<div>
<button @click="getStuList">查詢全部學生</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name:"Stu",
methods:{
getStuList(){//傳送ajax請求
axios.get("http://localhost:5000/students").then(
response=>{
console.log("請求成功...",response.data);
},
error=>{
console.log("請求失敗...",error.message)
}
)
}
}
}
</script>
<style>
</style>
直接請求報錯（跨域問題）
會發現，產生了跨域問題，接下來我們用以下兩種方式解決跨域
8.1 方式一
如果你的前端應用和後端 API 伺服器沒有執行在同一個主機上，你需要在開發環境下將 API 請求代理到 API 伺服器。這個問題可以透過 vue.config.js 中的 devServer.proxy 選項來配置。
devServer.proxy 可以是一個指向開發環境 API 伺服器的字串：
module.exports = {
devServer: {
proxy: 'http://localhost:5000'
}
}
將原請求路徑更改為以下
getStuList(){//傳送ajax請求
axios.get("http://localhost:8080/students").then(
response=>{
console.log("請求成功...",response.data);
},
error=>{
console.log("請求失敗...",error.message)
}
)
}
8.2 方式二
如果你想要更多的代理控制行為，也可以使用一個 path: options 成對的物件
配置vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false,
// devServer:{
// proxy:"http://localhost:5000"
// }
devServer: {
proxy: {
'/stu': {
target: 'http://localhost:5000',
ws: true,
changeOrigin: true,
pathRewrite:{"^/stu":""}
},
'/car': {
target: 'http://localhost:5001',
changeOrigin: true,
pathRewrite:{"^/car":""}
}
}
}
})
傳送axios
<template>
<div>
<button @click="getStuList">查詢全部學生</button>
<button @click="getCarList">查詢汽車資訊</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name:"Stu",
methods:{
getStuList(){//傳送ajax請求
axios.get("http://localhost:8080/stu/students").then(
response=>{
console.log("請求成功...",response.data);
},
error=>{
console.log("請求失敗...",error.message)
}
)
},
getCarList(){//傳送ajax請求
axios.get("http://localhost:8080/car/cars").then(
response=>{
console.log("請求成功...",response.data);
},
error=>{
console.log("請求失敗...",error.message)
}
)
},
}
}
</script>
<style>
</style>
9 路由
9.1 路由簡介
服務端路由指的是伺服器根據使用者訪問的 URL 路徑返回不同的響應結果。當我們在一個傳統的服務端渲染的 web 應用中點選一個連結時，瀏覽器會從服務端獲得全新的 HTML，然後重新載入整個頁面。
然而，在單頁面應用中，客戶端的 JavaScript 可以攔截頁面的跳轉請求，動態獲取新的資料，然後在無需重新載入的情況下更新當前頁面。這樣通常可以帶來更順滑的使用者體驗，尤其是在更偏向“應用”的場景下，因為這類場景下使用者通常會在很長的一段時間中做出多次互動。
9.1 路由的簡單使用
安裝vue-router
注意，在2022年2月7日以後，vue-router的預設版本為4版本，並且：Vue-router3才能再Vue2中使用
npm i vue-router@3
使用vue-router
建立一個叫router的資料夾，並建立index.js,我們建立並暴露一個路由器VueRouter
import VueRouter from 'vue-router'
export default new VueRouter({
routes:[
]
})
main.js中引入VueRouter並use，然後配置router
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router/index'
Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({
render: h => h(App),
router:router
}).$mount('#app')
src下建立views
準備兩個元件：Stu.vue|Class.vue
<template>
<div>
<h2>我是Stu內容</h2>
</div>
</template>
<script>
export default {
name:"Stu",
}
</script>
<style>
</style>
<template>
<div>
<h2>我是Class內容</h2>
</div>
</template>
<script>
export default {
name:"Class"
}
</script>
<style>
</style>
路由器中配置路由陣列routes 它裡面包含很多路由。
import VueRouter from 'vue-router'
import Stu from '../views/Stu'
import Class from '../views/Class'
export default new VueRouter({
routes:[
{
path:"/stu",
component:Stu
},{
path:"/class",
component:Class
}
]
})
App.vue使用路由
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<div>
<!-- 指定元件存放的位置 -->
<router-view></router-view>
</div>
<router-link class="test" active-class="active" to="/stu">學生管理</router-link>
<router-link class="test" active-class="active" to="/class">班級管理</router-link>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.test{
background-color: skyblue;
height: 100px;
width: 150px;
display: inline-block;
margin-left: 20px;
line-height: 100px;
text-decoration: none;
}
.active{
background-color: red;
}
</style>
點選學生管理，顯示我是Stu內容，點選班級管理顯示我是Class內容（區域性重新整理的）
