一、vue cli4.x 新加入了 TypeScript 以及 PWA 的支持

1.部分命令發生了變化：

下載安裝 npm install -g vue@cli
刪除了vue list
創建項目 vue create
啓動項目 npm run serve

2.默認項目目錄結構也發生了變化：

移除了配置文件目錄，config 和 build 文件夾
移除了 static 文件夾，新增 public 文件夾，並且 index.html 移動到 public 中
在 src 文件夾中新增了 views 文件夾，用於分類視圖組件和公共組件

二、項目搭建

第一步，安裝腳手架 vue@cli

npm install -g @vue/cli    //全局安裝最新的腳手架

關於舊版本
1.Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。如果你已經全局安裝了舊版本的 vue-cli(1.x 或 2.x)，你需要先通過：
npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。

2.安裝完Vue cli3 之後，還想用vue-cli2.x 版本
Vue CLI 3 和舊版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的 vue init 功能，你可以全局安裝一個橋接工具：

npm install -g @vue/cli-init
//安裝完後就還可以使用 vue init 命令
vue init webpack my_project

第二步，創建項目文件（初始化）

vue create projectName    //項目的名稱，好像不能有大寫o(╥﹏╥)o

第三步，選擇快捷式安裝配置

輸入命令後，會出現命令行交互窗口，這裏我們選擇 Manually select features：

Vue CLI v4.4.1
? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features

這裏如果你是第一次用3.0版本的話，是沒有前兩個的，而只有最後兩個，這裏是讓你選的，第一個是默認配置，一般選第二個，自己配置，這裏選擇最後一個，使用上下鍵選擇。

隨後我們勾選（使用上下鍵選擇，空格鍵確定）：Router、Vuex、CSS Pre-processors 和 Linter / Formatter，這些都是開發商業級項目必須的：

Vue CLI v4.4.1
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
>(*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

注意：Vue 3.0 項目目前需要從 Vue 2.0 項目升級而來，所以爲了直接升級到 Vue 3.0 全家桶，我們需要在 Vue 項目創建過程中勾選 Router 和 Vuex，所以避免手動寫初始化代碼

第四步，回車確認，開始選擇安裝具體工具包：

Vue CLI v4.4.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-proce
ssors, Linter
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No

①是否使用history router：就是我們的頁面路由含不含有#;這裏我們選擇Y
②css預處理器
③我選了Sacss
④ESLint：提供一個插件化的javascript代碼檢測工具
⑤何時檢測：提供一個插件化的javascript代碼檢測工具
⑥單元測試：
Mocha + Chai //mocha靈活,只提供簡單的測試結構，如果需要其他功能需要添加其他庫/插件完成。必須在全局環境中安裝
Jest //安裝配置簡單，容易上手。內置Istanbul，可以查看到測試覆蓋率，相較於Mocha:配置簡潔、測試代碼簡潔、易於和babel集成、內置豐富的expect
⑦如何存放配置：
Lint on save // 保存就檢測
Lint and fix on commit // fix和commit時候檢查
⑧是否保存本次配置（之後可以直接使用）：

項目創建完畢後，目錄結構如下：網友說：精簡的只剩靈魂了~.~

.
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── node_modules
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── api
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── router
    │   └── index.js
    ├── store
    │   └── index.js
    ├── util
    ├── views
    │   ├── About.vue
    │   └── Home.vue
    ├── App.vue
    └── main.js
└── statis

dist 是打包之後的文件新建的項目默認是沒的，要build後纔會生成

node_modules 是項目的依賴包

public 是整個程序的公共部分，
index.html 網站框架

icon.ico 網站圖標

src 是主要編碼文件夾
api 對後臺api發起request並獲得response 默認沒的，自己按需創建個

assets 網站中用到圖片的靜態文件

components 項目中能重用的vue組件

router 管理整個網站的路由信息

store 管理整個項目的全局變量

util 工具類

view 網站頁面，會調用compons來解耦

app.vue 整個vue組件的框架

main.js js文件入口

statis 項目中用到的靜態代碼段，自己按需創建個

第五步，啓動項目：npm run serve

第六步，配置跨域問題

由於vue cli3中沒有配置文件，所以我們要新建一個vue.config.js文件，在其中配置跨域問題

module.exports = {
  // All options for webpack-dev-server are supported
  // https://webpack.js.org/configuration/dev-server/
  devServer: {
    open: true,
    host: "127.0.0.1",
    port: 80,
    https: false,
    hotOnly: false,
    proxy: {
      "/api": {
        // 對應自己的接口
        target: 'http://127.0.0.1:8080/',
        changeOrigin: true,
        ws: true,
        // 重寫爲api
        pathRewrite: {
            '^/api': ''
          }
        }
    },
  },
}

三、vue項目啓動生命週期與頁面組件的運用（重點）*****

請求過程：

1) 先加載main.js啓動項目
    i) import Vue from 'vue' 爲項目加載vue環境
    ii) import App from './App.vue' 加載根組件用於渲染替換掛載點   （App.vue只要寫五句話）
    iii) import router from './router' 加載路由腳本文件，進入路由相關配置
    
2) 加載router.js文件，爲項目提供路由服務，並加載已配置的路由(鏈接與頁面組件的映射關係)
    注：不管當前渲染的是什麼路由，頁面渲染的一定是根組件，鏈接匹配到的頁面組件只是替換根組件中的
    <router-view></router-view>
    
3) 如果請求鏈接改變(路由改變)，就會匹配新鏈接對應的頁面組件，新頁面組件會替換渲染router-view標籤，
替換掉之前的頁面標籤(就是完成了頁面跳轉)

四、全局樣式文件配置

在assets中寫html,js,css文件，需要全局配置就在main.js中導入assets/css/global.css：

// 配置全局樣式
import '@/assets/css/global.css'

五、封裝小組件、新建頁

views裏面是頁面組件，components是小組件，小組件可以組成頁面組件，在頁面組件中components註冊小組件就可以在模板渲染出小組件(vue組件命名：官方標準-首字母大寫)

封裝Nav導航欄組件：

components/Nav.vue：

<template>
    <div class="nav">
        <ul>
            <li>
                <router-link to="/">主頁</router-link>
            </li>
            <li>
                <router-link to="/frist">第一頁</router-link>
            </li>
            <li>
                <router-link to="/two">第二頁</router-link>
            </li>
            <li>
                <router-link to="/about">關於</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Nav",
    }
</script>

<style scoped>
    .nav{
        width: 100%;
        height:60px;
        background-color: orange;
    }
    .nav li{
        float: left;
        font:normal 20px/60px '微軟雅黑';
        padding: 0 30px;
    }
    .nav li:hover {
        cursor: pointer;
        background-color: aquamarine;
    }
    .nav li.active {
        cursor: pointer;
        background-color: aquamarine;
    }
</style>

新增頁Frist.vue、Two.vue

view/Frist.vue、Two.vue、Home.vue 都編寫如下三步代碼

<template>
    <div class="home">
        <!-- 3）使用Nav組件 -->
        <Nav></Nav>
    </div>
</template>

<script>
    // 1）導入Nav組件
    import Nav from '@/components/Nav'
    export default {
        // 2）註冊Nav組件
        components: {
            Nav,
        }
    }
</script>


//每一個頁面都要寫好煩，那麼全局好了^_^：
//在App.vue裏：
<template>
  <div id="app">
    <Nav></Nav>
    <router-view />
  </div>
</template>
<script>
  import Nav from '@/components/Nav'
  export default{
    components:{
      Nav,
    }
  }
</script>

配置路由router.js:

// ...
import Frist from "../views/Frist.vue";
const routes = [
  {
    path:"/frist",
    name:"frist",
    component:Frist
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;



//另一種寫法：
const routes = [
  {
    path:"/two",
    name:"two",
    component:()=>
        import ("../views/Two.vue")

  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

新增頁面的三個步驟：

1) 在views文件夾中創建視圖組件
2) 在router.js文件中配置路由
3) 設置路由跳轉，在指定路由下渲染該頁面組件(替換根組件中的router-view標籤)

組件生命週期鉤子（官網API）

1）一個組件從創建到銷燬的整個過程，就稱之爲組件的生命週期

2）在組件創建到銷燬的過程中，會出現衆多關鍵的時間節點，如組件要創建了、組件創建完畢了、組件數據渲染完畢了、組件要被銷燬了、組件銷燬完畢了等等時間節點，每一個時間節點，vue都爲其提供了一個回調函數(在該組件到達該時間節點時，就會觸發對應的回調函數，在函數中就可以完成該節點需要完成的業務邏輯)

3）生命週期鉤子函數就是 vue實例成員

任何一個組件：在vue組件的script的export default導出字典中直接寫鉤子函數：

export default {
    // ...
    beforeCreate() {
        console.log('組件創建了，但數據和方法還未提供');
        console.log(this.title);
        console.log(this.alterTitle);
    },
    // 該鉤子需要掌握，一般該組件請求後臺的數據，都是在該鉤子中完成
    // 1）請求來的數據可以給頁面變量進行賦值
    // 2）該節點還只停留在虛擬DOM範疇，如果數據還需要做二次修改再渲染到頁面，
    //  可以在beforeMount、mounted鉤子中添加邏輯處理
    created() {
        console.log('組件創建了，數據和方法已提供');
        console.log(this.title);
        console.log(this.alterTitle);
        console.log(this.$options.name);
    },
    destroyed() {
        console.log('組件銷燬完畢')
    }
}

根據請求路徑高亮路由標籤案例

1) router-link會被解析爲a標籤，用to完成指定路徑跳轉，但是不能添加系統事件(因爲是組件標籤)
2) 在js方法中可以用 this.$router.push('路徑') 完成邏輯跳轉
3) 在js方法中可以用 this.$route.path 拿到當前請求的頁面路由

components/Nav.vue：

<template>
    <div class="nav">
        <ul>
            <li @click="changePage('/')" :class="{active: currentPage === '/'}">
<!--                <router-link to="/">主頁</router-link>-->
            </li>
            <li @click="changePage('/frist')" :class="{active: currentPage === '/frist'}">
<!--                <router-link to="/frist">第一頁</router-link>-->
            </li>
            <li @click="changePage('/two')" :class="{active:currentPage === '/two'}">
<!--                <router-link to="/two">第二頁</router-link>-->
            </li>
            <li @click="changePage('/about')" :class="{active:currentPage === '/about'}">
<!--                <router-link to="/about">關於</router-link>-->
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Nav",
        data() {
            return {
                // 每渲染一個頁面，都會出現加載Nav組件，currentPage就會被重置，
                // 1）在點擊跳轉事件中，將跳轉的頁面用 數據庫 保存，在鉤子函數中對currentPage進行數據更新
                // currentPage: localStorage.currentPage ? localStorage.currentPage: ''
                // 2）直接在created鉤子函數中，獲取當前的url路徑，根據路徑更新currentPage
                currentPage: ''
            }
        },
        methods: {
            changePage(page) {
                // console.log(page);
                // 當Nav出現渲染，該語句就無意義，因爲在data中將currentPage重置爲空
                // this.currentPage = page;

                // 有bug，用戶不通過點擊，直接修改請求路徑完成頁面跳轉，數據庫就不會更新數據
                // localStorage.currentPage = page;

                // 任何一個標籤的事件中，都可以通過router完成邏輯條件
                // console.log(this.$route);  // 管理路由數據
                // console.log(this.$router);  // 管理路由跳轉
                this.$router.push(page);  // 路由的邏輯跳轉
            }
        },
        // 當前組件加載成功，要根據當前實際所在的路徑，判斷當前激活標籤
        created() {
            // console.log(this.$route.path);
            this.currentPage = this.$route.path;
        }
    }
</script>

<style scoped>
    .nav{
        width: 100%;
        height:60px;
        background-color: orange;
    }
    .nav li{
        float: left;
        font:normal 20px/60px '微軟雅黑';
        padding: 0 30px;
    }
    .nav li:hover {
        cursor: pointer;
        background-color: aquamarine;
    }
    .nav li.active {
        cursor: pointer;
        background-color: aquamarine;
    }
</style>

vue文件中的調用關係：

擴展：render: h => h(App)

就是ES5 簡寫

 // ES5:
 render:function (createElement) {
   return createElement(App);
 }

升級 Vue 3.0 項目

目前創建 Vue 3.0 項目需要通過插件升級的方式來實現，vue-cli 還沒有直接支持，我們進入項目目錄，並輸入以下指令：

cd vue-next-test
vue add vue-next

執行上述指令後，會自動安裝 vue-cli-plugin-vue-next 插件（查看項目代碼），該插件會完成以下操作：

安裝 Vue 3.0 依賴
更新 Vue 3.0 webpack loader 配置，使其能夠支持 .vue 文件構建（這點非常重要）
創建 Vue 3.0 的模板代碼
自動將代碼中的 Vue Router 和 Vuex 升級到 4.0 版本，如果未安裝則不會升級
自動生成 Vue Router 和 Vuex 模板代碼
完成上述操作後，項目正式升級到 Vue 3.0，注意該插件還能支持 typescript，用 typescript 的同學還得再等等。

啓動圖形化界面創建項目

vue ui（全局命令，可以在任何文件夾下打開）

三、Vue @cli4.x 項目的搭建

一、vue cli4.x 新加入了 TypeScript 以及 PWA 的支持

二、項目搭建

三、vue項目啓動生命週期與頁面組件的運用（重點）*****

四、全局樣式文件配置

五、封裝小組件、新建頁

封裝Nav導航欄組件：

新增頁Frist.vue、Two.vue

組件生命週期鉤子（官網API）

根據請求路徑高亮路由標籤案例

vue文件中的調用關係：

擴展：render: h => h(App)

升級 Vue 3.0 項目

啓動圖形化界面創建項目

C#開源的兩款功能強大的錄屏神器

認知提升的方法

螞蟻面試：Springcloud核心組件的底層原理，你知道多少？

服務器設置 Header響應頭（Server、X-Frame-Options、X-Powered-By）

Linux 下使用mail/mailx命令發送郵件

Redis 填坑系列之——內存分配

Notepad++刪除各類註釋

四、Nuxt的介紹及簡單安裝(vue-cli4.x) -npx create-nuxt-app ‘xxx’ 創建項目報錯

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結