【萬字長文】 Vue全家桶從入門到實戰，超詳細筆記整理 ( 三 ) （建議收藏）

16、Vue CLI 腳手架

16.1、什么是CLI

命令列界面（英語：command-line interface，縮寫：CLI）是在圖形用戶界面得到普及之前使用最為廣泛的用戶界面，它通常不支持滑鼠，用戶通過鍵盤輸入指令，計算機接收到指令后，予以執行，也有人稱之為字符用戶界面（CUI）

16.2 什么是Vue CLI <====> (maven 專案構建工具)

Vue CLI 是一個基于 Vue.js 進行快速開發的完整系統， 使用Vue 腳手架之后我們開發的頁面將是一個完整系統(專案)， 前端系統

16.3 Vue CLI優勢

• 通過 vue-cli 搭建互動式的專案腳手架，
• 通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發
• 一個運行時依賴 (@vue/cli-service)，該依賴：
  • 可升級;
  • 基于 webpack 構建，并帶有合理的默認配置； webpack 前端打包工具 index.html vue組件 用戶組件 學生組件 … 路由 dist目錄
  • 可以通過專案內的組態檔進行配置； cli 專案組態檔 添加
  • 可以通過插件進行擴展， cli 專案里
• 一個豐富的官方插件集合，集成了前端生態中最好的工具， webpack打包工具===>dist目錄 nodejs 服務器(tomcat java) 熱部署插件 npm包
• 一套完全圖形化的創建和管理 Vue.js 專案的用戶界面

16.4 Vue CLI安裝

1、環境準備

# 1.下載nodejs
	http://nodejs.cn/download/
		windows系統:   .msi  安裝包(exe)指定安裝位置   .zip(壓縮包)直接解壓縮指定目錄
		mac os 系統:   .pkg  安裝包格式自動配置環境變數  .tar.gz(壓縮包)解壓縮安裝到指定名

# 2.配置nodejs環境變數
	1.windows系統:
	 	計算上右鍵屬性---->  高級屬性 ---->環境變數 添加如下配置:
		NODE_HOME=  nodejs安裝目錄
        PATH    = xxxx;%NODE_HOME%
    2.macos 系統
    	推薦使用.pkg安裝直接配置node環境

# 3.驗證nodejs環境是否成功
	node -v 

# 4.npm介紹
	node package mangager   nodejs包管理工具       前端主流技術  npm 進行統一管理
	maven 管理java后端依賴    遠程倉庫(中心倉庫)      阿里云鏡像
	npm   管理前端系統依賴     遠程倉庫(中心倉庫)      配置淘寶鏡像

# 5.配置淘寶鏡像
	  npm config set registry https://registry.npm.taobao.org
	  npm config get registry

# 6.配置npm下載依賴位置
	 windows:
		npm config set cache "D:\nodereps\npm-cache"
		npm config set prefix "D:\nodereps\npm_global"
	 mac os:
	 	npm config set cache "/Users/chenyannan/dev/nodereps"
		npm config set prefix "/Users/chenyannan/dev/nodereps"

# 7.驗證nodejs環境配置
	npm config ls
    ; userconfig /Users/chenyannan/.npmrc
    cache = "/Users/chenyannan/dev/nodereps"
    prefix = "/Users/chenyannan/dev/nodereps"
    registry = "https://registry.npm.taobao.org/"

2、安裝腳手架

# 0.卸載腳手架
	npm uninstall -g @vue/cli  //卸載3.x版本腳手架
	npm uninstall -g vue-cli  //卸載2.x版本腳手架

# 1.Vue Cli官方網站
	https://cli.vuejs.org/zh/guide/

# 2.安裝vue Cli
	npm install -g vue-cli

3、第一個vue腳手架專案

Vue-cli目錄結構

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-2QDNftWz-1627871421740)(Vue實戰筆記（三）.assets/image-20210721155403325.png)\

# 1.創建vue腳手架第一個專案
	vue init webpack 專案名
# 2.創建第一個專案
	hello     ------------->專案名
    -build  ------------->用來使用webpack打包使用build依賴  構建一些依賴檔案
    -config ------------->用來做整個專案配置目錄   主要用來對 開發 測驗 環境進行配置
    -node_modules  ------>用來管理專案中使用依賴
    -src					 ------>用來書寫vue的源代碼[重點]
    	+assets      ------>用來存放靜態資源 [重點]
      	components   ------>用來書寫Vue組件 [重點]
      	router			 ------>用來配置專案中路由[重點]
      	App.vue      ------>專案中根組件[重點]
      	main.js      ------>專案中主入口[重點]
    -static        ------>其它靜態
    -.babelrc      ------> 將es6語法轉為es5運行
    -.editorconfig ------> 專案編輯配置
    -.gitignore    ------> git版本控制忽略檔案
    -.postcssrc.js ------> 原始碼相關js
    -index.html    ------> 專案主頁
    -package.json  ------> 類似與pom.xml 依賴管理  jquery 不建議手動修改
    -package-lock.json ----> 對package.json加鎖
    -README.md         ----> 專案說明檔案

# 3.如何運行在專案的根目錄中執行
	npm run dev 運行前端系統

# 4.如何訪問專案
	http://localhost:8080    

# 5.Vue Cli中專案開發方式
	 注意: 一切皆組件   一個組件中   js代碼  html代碼  css樣式
	 	1. VueCli開發方式是在專案中開發一個一個組件對應一個業務功能模塊,日后可以將多個組件組合到一起形成一個前端系統
	 	2. 日后在使用vue Cli進行開發時不再書寫html,撰寫的是一個個組件(組件后綴.vue結尾的檔案),日后打包時vue cli會將組件編譯成運行的html檔案	  

rc 目錄

src目錄是專案的原始碼目錄，所有代碼都會寫在這里！

main.js

專案的入口檔案，我們知道所有的程式都會有一個入口

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'   // 引入VUE核心庫
import App from './App' // 引入一個當前目錄下的名字為App.vue的組件
import router from './router'

Vue.config.productionTip = false  // 是否要在生產環境當中給予提示功能，

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

• import Vue from 'vue'：ES6 寫法，會被轉換成 require(“vue”); （require 是 NodeJS 提供的模塊加載器）其實就相當于

  <script src = "vue"></script>

• import App from './App' ：意思同上，但是指定了查找路徑，./ 為當前目錄

• Vue.config.productionTip = false：關閉瀏覽器控制臺關于環境的相關提示

• new Vue({})：實體化 Vue

  • el: '#app'：查找 index.html 中 id 為 app 的元素
  • template: '<App/>'：模板，會將 index.html 中替換為
  • components: { App } ：引入組件，使用的是 import App from ‘./App’ 定義的 App 組件;

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
	<h1>自定義腳手架</h1>
	<!--展示路由-->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</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>

• template：HTML 代碼模板，會替換 < App /> 中的內容

• export default{…}：匯出 NodeJS 物件，作用是可以通過 import 關鍵字匯入

  • name: ‘App’：定義組件的名稱
  • components: { HelloWorld }：定義子組件

• 在hello,Vue中,關于 < style scoped> 的說明：CSS 樣式僅在當前組件有效，宣告了樣式的作用域,是當前的界面私有的! 不加代表全域有效，

index.js 配置路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router) //注冊路由 new Vue({router,})

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

HelloWorld.vue

<!-- 一個組件代表一個業務功能：html標簽 js代碼 css代碼 -->
<template>
  <div class="hello">
    
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '歡迎Vue'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

4、如何開發Vue腳手架

注意:在Vue cli 中一切皆組件

1、我們在HelloWorld.vue的同級目錄下新建兩個Student和User組件，

2、Student.vue和User.vue組件

Student.vue組件

<template>
  <div class="hello">
     <h1>hello world {{msg}} </h1>
	 <h3>我是學生管理的主頁</h3>
  </div>
</template>

<script>
export default {
  name: 'Student',
  data () {
    return {
      msg: '學生管理'
    }
  }
}
</script>

User.vue組件

<template>
  <div class="hello">
     <h1>hello world {{msg}} </h1>
	 <h3>我是用戶管理的主頁</h3>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '用戶管理'
    }
  }
}
</script>

3、在App.vue組件中引入這兩個組件的鏈接，進行路由切換

<template>
  <div id="app">
    <img src="./assets/logo.png">
	<h1>自定義腳手架</h1>
	
	<router-link to="/">主頁</router-link>
	<router-link to="/user">用戶管理</router-link>
	<router-link to="/student">學生管理</router-link>
	
	<!--展示路由-->
    <router-view/>
  </div>
</template>

4、啟動專案，測驗一下

17、在腳手架中使用axios

17.1、安裝axios

# 1.安裝axios
	npm install axios --save

# 2.配置main.js中引入axios
	import axios from 'axios';
	Vue.prototype.$http=axios;

# 3.使用axios
	在需要發送異步請求的位置:this.$http.get("url").then((res)=>{}) this.$http.post("url").then((res)=>{})

18、Vue Cli腳手架專案部署

# 1.在專案根目錄中執行如下命令:
	npm run build
	注意:vue腳手架打包的專案必須在服務器上運行不能直接雙擊運行

# 2.打包之后當前專案中變化
	在打包之后專案中出現dist目錄,dist目錄就是vue腳手架專案生產目錄或者說是直接部署目錄

19、webstorm開發vue cli專案

19.1、簡介

WebStorm 是JetBrains公司旗下一款JavaScript 開發工具，已經被廣大中國JS開發者譽為“Web前端開發神器”、“最強大的HTML5編輯器”、“最智能的JavaScript IDE”等，與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能，

19.2、安裝

官網地址：http://www.jetbrains.com/webstorm/

選擇好安裝路徑

19.3、使用webstorm

webstorm和idea同屬于一家開發公司，因此使用方式基本一樣，

使用webstorm初始化專案

1、我們新建一個webstromcodes專案，

2、打開Terminal終端，輸入vue init webpack vue_day5 ，進行vue-day5專案的創建，

3、接下來的步驟和使用Vue Cli腳手架開發一樣，

4、顯示如下頁面，專案初始化成功，

可以看下目錄結構，和使用Vue CLI腳手架開發目錄結構一致，

5、在Terminal終端輸入cd vue_day5，進入當前專案根目錄，專案目錄中包含package.json才是根目錄，可以輸入dir查看當前目錄結構，

6、最后我們輸入npm run dev啟動專案，出現如下界面：

說明專案成功運行！！！輸入http://localhost:8080 ，打開瀏覽器查看一下，出現默認界面，

main.js 專案中主入口

//引入vue.js
import Vue from 'vue'
//引入app.vue 組件
import App from './App'
//引入router目錄中 /index.js
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app', //指定vue實體作用范圍
  router,
  components: { App },
  template: '<App/>'
})

19.4、開發vue cli專案(一)

1、Student組件

template>
  <div class="hello">
    <h1>{{ msg }}</h1>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '歡迎進入我的系統！！！'
    }
  }
}

2、User組件

<template>
  <div>
    <h1>用戶管理</h1>
    <table border="1" width="100%">
      <tr>
        <th>編號</th>
        <th>姓名</th>
        <th>年齡</th>
        <th>工資</th>
        <th>操作</th>
      </tr>
      <tr v-for="(user,index) in users" :key="user.id" >
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td>{{user.age }}</td>
        <td>{{user.des}}</td>
        <td><a href="">洗掉</a> <a href="">修改</a></td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "User",
  data(){
    return {
      users:[],//定義陣列
    };
  },
  methods:{

  },
  computed:{

  },
  created() { //初始化階段發送請求查詢所有用戶資訊
    this.$http.get("http://localhost:8990/users").then(res=>{
       console.log(res.data);
       this.users = res.data;
    });
  }
}

3、App組件

<!--組件html標簽--><template>  <div id="app">    <!--展示vue腳手架logo-->    <img src="./assets/1.jpg" class="aa">    <br>    <!--主頁-->    <router-link to="/">主頁</router-link>    <!--用戶管理-->    <router-link to="/user">用戶管理</router-link>    <!--學生管理-->    <router-link to="/student">學生管理</router-link>    <!--展示路由組件-->    <router-view/>  </div></template><!--組件中js代碼--><script>export default {  name: 'App'}</script>

4、index.js

import Vue from 'vue'
import Router from 'vue-router'
//@ 代表src目錄
import HelloWorld from '@/components/HelloWorld'
import User from '@/components/User'
import Student from "../components/Student";
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/user',
      name: 'user',
      component: User
    },{
      path: '/student',
      name: 'student',
      component: Student
    }
  ]
})

啟動專案測驗一下：

成功查詢到資料！！！

19.5、開發vue cli專案(二)

20、VueX 狀態管理

20.1、簡介&安裝

# 1.簡介
- Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式，它采用集中式存盤管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化

# 2.安裝vuex
-	npm install vuex --save

# 3.創建vue cli中創建store檔案夾

# 4.在stroe中創建index.js檔案

import Vue from 'vue'
import Vuex from 'vuex'
//1.安裝vuex
Vue.use(Vuex);
//2.創建store物件
const store = new Vuex.Store({
  
});
//3.暴露store物件
export default store;

# 5.在main.js中引入stroe并注冊到vue實體

import Vue from 'vue'
import App from './App'
import router from './router'
import store from "./stroe";//引入store
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store,//注冊狀態
})

20.2、state屬性

# 1.state屬性
- 作用: 用來全域定義一些共享的資料狀態

# 2.語法
    const store = new Vuex.Store({
    	state:{
    		counter:0,//定義共享狀態
    	},
    }

# 3.使用
	 {{$store.state.counter}} ===> {{this.$store.state.counter}}

20.3、mutations 屬性

# 1.mutations 屬性
- 作用: 用來定義對共享的資料修改的一系列函式

# 2.語法
    const store = new Vuex.Store({
      state:{
        counter:0,//定義共享狀態
      },
      mutations:{
        //增加
        increment(state){
          state.counter++
        },
        //減小
        decrement(state){
          state.counter--
        }
      }
    });

# 3.使用
	this.$store.commit('decrement');
	this.$store.commit('increment');

# 4.mutations傳遞引數

- a.定義帶有引數的函式
			mutations:{
     		//addCount 引數1:state 物件 引數2:自定義引數
     		addCount(state,counter){
        	console.log(counter);
        	return  state.counter += counter ;
      	}
    	}
- b.呼叫時傳遞引數
		this.$store.commit('addCount',11);

20.4、getters 屬性

# 1.getters 屬性
- 官方:  允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性），就像計算屬性一樣，getter 的回傳值會根據	
	它的依賴被快取起來，且只有當它的依賴值發生了改變才會被重新計算，
- 作用: 用來定義對共享的資料的計算相關的一系列函式 相當于 computed 屬性 會對結果進行快取

# 2.語法
	  getters:{
      //平方
      mathSqrts(state){
        console.log("--------");
        return state.counter*state.counter;
      },
      //乘以一個數字
      mathSqrtsNumber(state,getters){
        return getters.mathSqrts*3;
      },
      //傳遞引數
      mathSqrtsNumbers(state,getters){
        return function (number){
          return  number;
        }
      }
    }

# 3.使用
-		1.{{$store.getters.mathSqrts}}
-   2.{{$store.getters.mathSqrtsNumber}}
-   3.{{$store.getters.mathSqrtsNumbers(3)}}

20.5、練習

index.js

import Vue from 'vue' //vue.js
import Vuex from 'vuex'  //vuex.js

//1. vue中使用vuex
Vue.use(Vuex);

//2. 創建store物件
export default new Vuex.Store({
    //state: 用來定義所有組件共享的資料
    state:{
      counter:0,
    },
    //mutations: 用來定義對共享資料的修改方法
    mutations:{
      incrCounter(state){
        state.counter++;
      },
      decrCounter(state){
        state.counter--;
      },
      incrCounterCount(state,count){
        state.counter += count;
      },
    },
   //getters: 相當于store共享資料計算屬性，該計算屬性中方法只會執行一次，只有計算屬性值發生變化才會重新計算，相當于之前的computed屬性
   getters:{
      incrCount(state){  //二次渲染計算
          return state.counter + 10;
      },
      match(state,getters){
          return getters.incrCount * 2;
      }
   }
});

User.vue

<template>
  <div>
    <h1>用戶管理--{{this.$store.state.counter}}--{{this.$store.getters.incrCount}}--{{this.$store.getters.match}}</h1>
    <input type="button" value="點我修改共享資料counter++" @click="changeStoreCounter">
    <input type="button" value="點我修改共享資料counter--" @click="decrStoreCounter">
    <input type="button" value="點我修改共享資料counter+5" @click="changeStoreCounterFive">
    <router-link to="/user/add" style="float: left">添加用戶資訊</router-link>
    <table border="1" width="100%">
      <tr>
        <th>編號</th>
        <th>姓名</th>
        <th>年齡</th>
        <th>工資</th>
        <th>操作</th>
      </tr>
      <tr v-for="(user,index) in users" :key="user.id" >
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td>{{user.age }}</td>
        <td>{{user.des}}</td>
        <td><a href="javascript:;" @click="delUser(user.id)">洗掉</a> <router-link to="/user/add?id=user.id&name" >修改</router-link></td>
      </tr>
    </table>

    <hr>
    <!--顯示子組件路由-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "User",
  data(){
    return {
      users:[],//定義陣列
    };
  },
  methods:{
    findAll(){
      this.$http.get("http://localhost:8990/users").then(res=>{
        console.log(res.data);
        this.users = res.data;
      });
    },
    delUser(id){
      //友情提醒洗掉
      if(window.confirm("您確定要洗掉這條記錄嗎？")){
        this.$http.delete("http://localhost:8990/delete/"+id).then(res=>{
          alert("用戶資訊洗掉成功!");
          this.findAll(); 呼叫查詢所有
        }).catch(err=>{
          alert("用戶資訊洗掉失敗!");
        });
      }
    },
    changeStoreCounter(){
       //修改共享資料counter++
      this.$store.commit('incrCounter');
    },
    decrStoreCounter(){
      //修改共享資料counter--
      this.$store.commit('decrCounter');
    },
    changeStoreCounterFive(){
      //修改共享資料counter+5
      this.$store.commit('incrCounterCount',5);
    }
  },
  computed:{

  },
  created() { //初始化階段發送請求查詢所有用戶資訊
    this.findAll();
  },  //user  /user/add /user/edit
  beforeRouteUpdate(to,from,next){ //當前組件中路由更新時自動觸發的函式
    this.findAll();
    next(); //放行后路由后續操作
  },

}
</script>

<style scoped>
  th{
    background-color: beige;
  }
</style>