使用vue-cli（vue腳手架）快速搭建專案-有解無憂

🍅 Java學習路線：搬磚工逆襲Java架構師

🍅 Java經典面試題大全：10萬字208道Java經典面試題總結(附答案)

🍅 簡介：Java領域優質創作者🏆、CSDN哪吒公眾號作者? 、Java架構師奮斗者💪

🍅 掃描主頁左側二維碼，加入群聊，一起學習、一起進步

🍅 歡迎點贊 👍 收藏 ?留言 📝

Vue思維導圖

🍅 粉絲專屬福利：包郵送書3本，如下書單四選一，

🍅 獲取方式：

1、參與文末投票，點贊，收藏即有機會獲得精美圖書一本；

1、評論區評論：獲取點贊最多者，獲取一本；

2、評論區評論：通過random函式，隨機抽取兩名；

【注意】想加入微信群聊，可以掃描主頁左側二維碼、私信與我、加本人微信guo_rui_

1、《億級流量Java高并發與網路編程實戰》

2、《分布式一致性演算法開發實戰媒體宣傳文案》

3、《Java多執行緒與大資料處理實戰》

4、《深入淺出TCPIP和VPN》

一、什么是VueCLI

1、如果你只是簡單寫幾個Vue的Demo程式，那么你不需要VueCLI腳手架，

2、如果你在開發大型專案，那么你需要，并且必然需要使用VueCLI，

3、CLI是什么意思？

4、腳手架長什么樣？

5、腳手架依賴于node.js和webpack

二、安裝Vue CLI腳手架

三、runtime-compiler和runtime-only的區別

1、runtime-compiler加載程序

2、runtime-only加載程序：（性能更高，代碼更少）

3、小結

4、代碼實體

5、npm run build執行程序

6、npm run dev執行程序

四、認識Vue CLI3

1、vue-cli 3 與 vue-cli 2 版本的區別？

2、通過腳手架3構建專案

五、箭頭函式

1、定義函式的三種方式

2、箭頭函式引數和回傳值

3、什么時候使用箭頭函式

4、箭頭函數與this

六、前端路由vue-router

1、維基百科

2、路由的機制

3、后端渲染

4、后端路由階段

5、前后端分離

6、單頁面富應用階段

7、SPA頁面

8、前端路由

七、改變URL，但是頁面不進行整體的重繪

1、URL的hash

2、HTML5的history

一、什么是VueCLI

1、如果你只是簡單寫幾個Vue的Demo程式，那么你不需要VueCLI腳手架，

2、如果你在開發大型專案，那么你需要，并且必然需要使用VueCLI，

使用Vue.js開發大型應用時，我們需要考慮代碼目錄結構、專案結構和部署、熱加載、代碼單元測驗等事情，
如果每個專案都要手動完成這些作業，那么無疑效率比較低效，所以通常我們會使用一些腳手架工具來幫助完成這些事情，

3、CLI是什么意思？

CLI是Commond-Line Interface，翻譯為命令列界面，俗稱腳手架，
VueCLI是一個官方發布vue.js專案腳手架，
使用VueCLI可以快速搭建vue開發環境以及對應的webpack配置，

4、腳手架長什么樣？

5、腳手架依賴于node.js和webpack

二、安裝Vue CLI腳手架

//默認安裝腳手架3
npm install -g @vue/cli

//安裝腳手架2
npm install -g @vue/cli-init

//腳手架2創建專案
vue init webpack my-project

//腳手架3創建專案
vue create my-project

三、runtime-compiler和runtime-only的區別

1、runtime-compiler加載程序

template -> ast -> render -> vdom -> UI

2、runtime-only加載程序：（性能更高，代碼更少）

render -> vdom -> UI

3、小結

如果在之后的開發中，你依然使用template，就需要選擇Runtime-Compiler；

如果你之后的開發中，使用的是.vue檔案夾開發，那么可以選擇Runtime-only；

4、代碼實體

main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
// const cpn = {
//   template: '<div>{{message}}</div>',
//   data() {
//     return {
//       message: '我是組件message'
//     }
//   }
// }

new Vue({
  el: '#app',
  render: function (createElement) {
    // 1.普通用法: createElement('標簽', {標簽的屬性}, [''])
    // return createElement('h2',
    //   {class: 'box'},
    //   ['Hello World', createElement('button', ['按鈕'])])

    // 2.傳入組件物件:
    return createElement(App)
  }
})

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

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

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>runtimecompiler</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

5、npm run build執行程序

6、npm run dev執行程序

四、認識Vue CLI3

1、vue-cli 3 與 vue-cli 2 版本的區別？

vue-cli 3 是基于 webpack 4 打造，vue-cli 2 還是 webapck 3
vue-cli 3 的設計原則是“0配置”，移除的組態檔根目錄下的，build和config等目錄
vue-cli 3 提供了 vue ui 命令，提供了可視化配置，更加人性化
移除了static檔案夾，新增了public檔案夾，并且index.html移動到public中

2、通過腳手架3構建專案

vue create my-project

運行專案

npm run serve

注意：

之前學習的時候main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: h => h(App)
})

通過 Vue CLI3創建的專案main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

兩種寫法沒區別，

el多了一個判斷，el被決議為$mount，

五、箭頭函式

1、定義函式的三種方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script>
  // 箭頭函式: 也是一種定義函式的方式
  // 1.定義函式的方式: function
  const aaa = function () {

  }

  // 2.物件字面量中定義函式
  const obj = {
    bbb() {

    }
  }

  // 3.ES6中的箭頭函式
  // const ccc = (引數串列) => {
  //
  // }
  const ccc = () => {

  }

</script>
</body>
</html>

2、箭頭函式引數和回傳值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>


<script>
  // 1.引數問題:
  // 1.1.放入兩個引數
  const sum = (num1, num2) => {
    return num1 + num2
  }

  // 1.2.放入一個引數
  const power = num => {
    return num * num
  }

  // 2.函式中
  // 2.1.函式代碼塊中有多行代碼時
  const test = () => {
    // 1.列印Hello World
    console.log('Hello World');

    // 2.列印Hello Vuejs
    console.log('Hello Vuejs');
  }

  // 2.2.函式代碼塊中只有一行代碼
  // const mul = (num1, num2) => {
  //   return num1 + num2
  // }
  const mul = (num1, num2) => num1 * num2
  console.log(mul(20, 30));

  // const demo = () => {
  //   console.log('Hello Demo');
  // }
  const demo = () => console.log('Hello Demo')
  console.log(demo());


</script>
</body>
</html>

3、什么時候使用箭頭函式

什么時候使用箭頭
setTimeout(function () {
  console.log("我是csdn哪吒");
}, 1000)

setTimeout(() => {
  console.log("我是csdn哪吒");
}, 1000)

4、箭頭函式與this

// 問題: 箭頭函式中的this是如何查找的了?
// 答案: 向外層作用域中, 一層層查找this, 直到有this的定義.
const obj = {
  aaa() {
    setTimeout(function () {
      console.log(this); // window
    })

    setTimeout(() => {
      console.log(this); // obj物件
    })
  }
}

obj.aaa()

六、前端路由vue-router

1、維基百科

路由就是通過互聯的網路把資訊從源地址傳輸到目的地址的活動，

2、路由的機制

路由包括路由和轉發，

路由器 -> 公網IP -> 映射表 -> 內網IP

映射表：[內網ip1:電腦標識1，內網ip2:電腦標識2]

3、后端渲染

JSP：java server page

后端渲染 == html + css + java

java代碼的作用是從資料庫中讀取資料，然后將他們動態的放在頁面中，

后端渲染的意思就是，前端請求后端，頁面的資料在后端已經渲染好了，然后再回傳前端，內容包括HTML+css，當然是包含資料的HTML，

后端路由：后端處理URL和頁面之間的映射關系，

4、后端路由階段

早期的網站開發整個HTML頁面是由服務器來渲染的，
服務器直接生產渲染好對應的HTML頁面, 回傳給客戶端進行展示，

但是, 一個網站, 這么多頁面服務器如何處理呢?

一個頁面有自己對應的網址, 也就是URL，
URL會發送到服務器, 服務器會通過正則對該URL進行匹配, 并且最后交給一個Controller進行處理，
Controller進行各種處理, 最終生成HTML或者資料, 回傳給前端，
這就完成了一個IO操作，

上面的這種操作, 就是后端路由：

當我們頁面中需要請求不同的路徑內容時, 交給服務器來進行處理, 服務器渲染好整個頁面, 并且將頁面回傳給客戶頓，
這種情況下渲染好的頁面, 不需要單獨加載任何的js和css, 可以直接交給瀏覽器展示, 這樣也有利于SEO的優化，

后端路由的缺點：

一種情況是整個頁面的模塊由后端人員來撰寫和維護的，
另一種情況是前端開發人員如果要開發頁面, 需要通過PHP和Java等語言來撰寫頁面代碼，
而且通常情況下HTML代碼和資料以及對應的邏輯會混在一起, 撰寫和維護都是非常糟糕的事情，

5、前后端分離

后端只負責提供資料，不負責其它任何階段，

瀏覽器中顯示的網頁中的大部分內容，都是由前端寫的JS代碼在瀏覽器中執行，最終渲染出來的網頁，

隨著Ajax的出現, 有了前后端分離的開發模式，
后端只提供API來回傳資料, 前端通過Ajax獲取資料, 并且可以通過JavaScript將資料渲染到頁面中，
這樣做最大的優點就是前后端責任的清晰, 后端專注于資料上, 前端專注于互動和可視化上，
并且當移動端(iOS/Android)出現后, 后端不需要進行任何處理, 依然使用之前的一套API即可，
目前很多的網站依然采用這種模式開發，

6、單頁面富應用階段

其實SPA最主要的特點就是前后端分離的基礎上加上了一層前端路由；
也就是前端來維護一套路由規則

7、SPA頁面

SPA：單頁富應用

整個網頁只有一個HTML網頁，

8、前端路由

URL和前端頁面的映射關系，

-----> vue router

前端路由的核心是什么呢？

改變URL，但是頁面不進行整體的重繪，

七、改變URL，但是頁面不進行整體的重繪

1、URL的hash

URL的hash也就是錨點，本質上是改變window.location的href屬性，

我們可以通過直接賦值location.hash來改變href，但是頁面不發生重繪，

2、HTML5的history

history.pushState({},'','home')

history.pushState相當于堆疊的操作，先進后出，彈堆疊和入堆疊的操作，

history.pushState入堆疊；

history.back()出堆疊；

history.go(-1) 相當于 history.back()；

history.forward 相當于history.go(1)；

history.replaceState()：不能回傳；

🍅 粉絲專屬福利：包郵送書3本，如下書單四選一，

🍅 獲取方式：

1、參與文末投票，點贊，收藏即有機會獲得精美圖書一本；

1、評論區評論：獲取點贊最多者，獲取一本；

2、評論區評論：通過random函式，隨機抽取兩名；

【注意】想加入微信群聊，可以掃描主頁左側二維碼、私信與我、加本人微信guo_rui_

往期精彩回顧

【Vue基礎知識總結 1】Vue入門

【Vue知識體系總結 2】Vue動態系結v-bind

【Vue知識體系總結 3】Vue常用標簽

【Vue知識體系總結 4】Vue組件化開發

【Vue基礎知識總結 5】Vue實作樹形結構

【Vue基礎知識總結 6】Spring Boot + Vue 全堆疊開發，都需要哪些前端知識？

【Vue基礎知識總結 7】結合雙向系結理解父子組件

【Vue基礎知識總結 8】插槽slot與vue匯入匯出

【Vue基礎知識總結 9】vue webpack打包原理

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/306474.html

標籤：其他

上一篇：一杯茶的時間，帶你徹底學會手寫防抖節流

下一篇：劍指 Offer 53 - I. 在排序陣列中查找數字 I 【 c++/java詳細題解】