1、Vue 入門介紹

一、Vue 技術棧

node.js：JavaScript運行環境(runtime)
npm：node.js的包管理工具，用於同一管理我們前端項目中需要用到的包、插件、工具、命令等，便於開發和維護。
ES6：Javascript的新版本，ECMAScript6的簡稱。利用ES6我們可以簡化我們的JS代碼，同時利用其提供的強大功能來快速實現JS邏輯。
Babel：一款將ES6代碼轉化爲瀏覽器兼容的ES5代碼的插件
vue-cli：Vue的腳手架工具，用於自動生成Vue項目的目錄及文件。
vue-router： Vue提供的前端路由工具，利用其我們實現頁面的路由控制，局部刷新及按需加載，構建單頁應用，實現前後端分離。
vuex：Vue提供的狀態管理工具，用於同一管理我們項目中各種數據的交互和重用，存儲我們需要用到數據對象。
webpack：一款強大的文件打包工具，可以將我們的前端項目文件同一打包壓縮至js中，並且可以通過vue-loader等加載器實現語法轉化與加載。

二、node.js

（一）簡介

我們知道javascript代碼只能在瀏覽器上運行，只有瀏覽器能夠解析js代碼，如果想要javascript代碼能夠在服務器端運行就必須提供一個Javascript的運行環境(runtime environment)，這就是node.js。

node.js是對Chrome V8引擎進行了封裝，是一個能讓JavaScript運行在服務端的開發平臺，它讓JavaScript成爲與PHP、Python、Perl、Ruby等服務端語言平起平坐的腳本語言。

（二）運行一個helloworld.js

# 查看node的版本
$ node -v

$ cat helloworld.js
console.log("Hello Node.js");

$ node helloworld.js
Hello Node.js

（三）運行一個簡單的http服務

1、index.js

// 1、加載http模塊
var http = require('http');

// 2、創建一個http服務對象
var server = http.createServer();


// 3、監聽用戶的請求事件（request事件）
// 回調函數中有兩個參數
// request 對象 包含用戶請求報文中所有內容，通過request對象可以獲取所有用戶提交過來的數據
// response 對象 用來向用戶響應一些數據，當服務器要向客戶端響應數據的時候必須使用response對象
server.on('request', function (req, res) {
  res.setHeader('Content-Type', 'text/html; charset=utf-8');
  var url = req.url;
  res.write('<h1> web http server <br/> request url :' + url + ' </h1>');
  // 對於每一個請求，服務器必須結束響應，否則，客戶端（瀏覽器）會一直等待服務器響應結束
  res.end();
});
 
// 4、啓動服務
server.listen(8080, function () {
  console.log('服務器啓動了，請訪問：http://localhost:8080');
});

2、運行index.js

$ node index.js

4、在瀏覽器上訪問`http://localhost:8080`

三：npm

（一）簡介

在傳統的前端開發中我們會經常引入jquery、bootstrap、echarts等js插件，我們首先去插件的每個官網去下載下來，然後放到自己前端工程中static/js目錄下，我們每引用一個插件都要去官網下載，然後將下載的插件拖到工程中來，美國的一個程序員Isaac Z. Schlueter就做夠了這種機械運動，想簡化這個流程，於是做了這樣一件事：

買了臺服務器作爲代碼倉庫(registry), 用於存放被共享的代碼

發郵件分別通知各大JS插件作者(如jQuery的作者、bootstrap的作者、Vue的作者、element-ui的作者等等)讓他們使用npm publish 命令將自己的JS插件提交到registry中

用戶如果想使用某個JS插件可以先在package.json中配置一些需要安裝的插件名稱和對應的版本號(依賴dependency)，然後通過npm install命令來下載它們，下載下來的插件自動放在node_modules目錄下面。

npm: Node Package Manager, 一種用Node.js開發的工具用於發佈插件到倉庫和從插件倉庫中下載插件的工具，一種用於共享JS代碼的工具。

（二）如何安裝npm

由於node.js當時也缺少一個包管理器，npm也是使用node.js開發的，這個工具使用的人較少，後來node.js的作者和npm的作者溝通一下將npm作爲node.js包管理器，內置到node.js中，後來由於node.js大火，npm使用的人也越來越多，越來越多的JS插件通過npm被共享，現在幾乎常用的插件都能在npm中找到，現在的npm已經發展成爲前端共享代碼的標準了。因爲npm已經內置於node.js當中了，所以安裝了node.js也就安裝了npm, 可以通過node -v 和 npm -v 分別查看對應的版本。

（三）如何生成package.json文件

npm init : 用於生成一個基礎的package.json文件，裏面包含名稱、版本號、描述、主文件、作者、協議等

package.json
{
  "name": "platform-webapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

四：webpack

（一）簡介

傳統的前端一般會html、javascript、css這三樣東西就夠了。現代的前端發展迅猛，引入了TypeScript、SCSS、LESS、stylus(CSS預處理器)等技術，提供了更豐富的特性，提高了開發效率，但是引入的這些技術不能直接被瀏覽器解析，需要一個東西將瀏覽器不能解析的代碼翻譯成瀏覽器可以直接解析代碼，這就是webpack的作用。

TypeScript是JavaScript類型的超集(簡單的說就是對JavaScript的封裝)，提供更加豐富的特性(在JavaScript上添加了可選的靜態類型和基於類的面向對象編程)，而且可以編譯成純JavaScript

ECMAScript：ECMAScript是標準，JavaScript是ECMAScript的實現，ECMAScript也在快速發展，引入了更多的語法新特性等。其中ECMAScript6使用較多，現在ECMAScript8已經發布了。

SCSS: SCSS即是SASS的新語法，是Sassy CSS的簡寫，是CSS3語法的超集，也就是說所有有效的CSS3樣式也同樣適合於SASS。SASS是CSS3的一個擴展，增加了規則嵌套、變量、混合、選擇器繼承等等。通過使用命令行工具或WEB框架插件把它轉換成標準的、格式良好的CSS代碼。

less: Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。Less 可以運行在 Node 或瀏覽器端。

stylus：文件後綴是. styl 的這個哥們兒學名叫 stylus，是 CSS 的預處理框架。stylus 給 CSS 添加了可編程的特性，也就是說，在 stylus 中可以使用變量、函數、判斷、循環一系列 CSS 沒有的東西來編寫樣式文件，執行這一套騷操作之後，這個文件可編譯成 CSS 文件。

webpack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（TypeScript、SCSS等），並將其打包爲合適的格式以供瀏覽器直接使用。隨着webpack的發展，webpack支持ECMAScript6、ECMAScript7、ECMAScript8等。隨着webpack的發展，webpack不僅僅用來編譯(翻譯)代碼，也集成了更多的功能，比如：

熱加載：修改了代碼然後保存，瀏覽器會自動刷新
壓縮文件：壓縮圖片，字體, 腳本文件等
插件(plugin)：webpack打包時可以執行某個插件，控制webpack打包時的某個過程，這種插件機制和maven中的插件原理完全一樣
webpack最終發展成爲：前端項目的構建工具。

模塊(module)化就是把複雜的應用程序細分爲較小的文件，在webpack中一切都是模塊，js、css、圖片、字體等待都可稱爲模塊。

webpack文檔

（二）webpack安裝

webpack可以通過npm安裝,安裝後會生成一個node_modules目錄

# npm初始化,直接回車即可，生成package.json文件
npm init

# npm全局(global)安裝
npm install -g webpack 

# 切換到項目根目錄，安裝到你的項目目錄中, 生成node_modules目錄和package-lock.json文件
# 注意：全局安裝的作用是可以在命令行中直接使用命令，效果類似於環境變量的作用
# 全局安裝後，仍然需要在自己的項目中再次安裝
# --save-dev 將依賴保存到package.json中的devDependencies中
# --save 將依賴保存到package.json中的dependencies中
npm install --save-dev webpack


# webpack 打包命令
webpack <源文件> -o <目標文件>

webpack src/index.js -o dist/index.bundle.js

# 如果報錯Error: Cannot find module 'webpack-cli'，執行下面命令
npm install webpack-cli -g

（三）webpack中的重要功能

1、devtool

devtool: “eval-source-map” webpack打包後的文件可讀性非常低，不利於調試，使用devtool可以生成對應的源碼便於調試。使用eval打包源文件模塊，在同一個文件中生成乾淨的完整的source map。這個選項可以在不影響構建速度的前提下生成完整的sourcemap，但是對打包後輸出的JS文件的執行具有性能和安全的隱患。在開發階段這是一個非常好的選項，在生產階段則一定不要啓用這個選項；

2、webpack-dev-server

webpack-dev-server 是一個本地開發服務器，居於node.js實現的，使用npm run dev 後就可以使用默認的8080端口在瀏覽器上訪問了，類似於apache的功能

3、loaders

loader可以讓webpack有能力調用外部的腳本或工具，實現對不同格式的文件的處理，比如說分析轉換scss爲css，或者把下一代的JS文件（ES6，ES7)轉換爲現代瀏覽器兼容的JS文件

css-loader 和 style-loader 就是用來處理樣式的。

4、babel(很重要)

Babel其實是一個編譯JavaScript的平臺，它可以編譯代碼幫你達到以下目的：

讓你能使用最新的JavaScript代碼（ES6，ES7等待），而不用管新標準是否被當前使用的瀏覽器完全支持；
讓你能使用基於JavaScript進行了拓展的語言，比如React的JSX；

5、plugins

插件（Plugins）是用來拓展Webpack功能的，它們會在整個構建過程中生效，執行相關的任務。

Loaders和Plugins常常被弄混，但是他們其實是完全不同的東西，可以這麼來說，loaders是在打包構建過程中用來處理源文件的（JSX，Scss，Less…），一次處理一個，插件並不直接操作單個文件，它直接對整個構建過程其作用。

Webpack有很多內置插件，同時也有很多第三方插件，可以讓我們完成更加豐富的功能。

常用的插件：

HtmlWebpackPlugin
Hot Module Replacement（HMR）熱加載：允許你在修改組件代碼後，自動刷新實時預覽修改後的效果
clean-webpack-plugin 去除build文件中的殘餘文件
OccurenceOrderPlugin :爲組件分配ID，通過這個插件webpack可以分析和優先考慮使用最多的模塊，併爲它們分配最小的ID
UglifyJsPlugin：壓縮JS代碼
ExtractTextPlugin：分離CSS和JS文件

6、webpack配置文件

如果與輸入相關的需求，找entry（比如多頁面就有多個入口）
如果與輸出相關的需求，找output（比如你需要定義輸出文件的路徑、名字等等）
如果與模塊尋址相關的需求，找resolve（比如定義別名alias）
如果與轉譯相關的需求，找loader（比如處理sass處理es678N）
如果與構建流程相關的需求，找plugin（比如我需要在打包完成後，將打包好的文件複製到某個目錄，然後提交到git上）

五：vue.js是什麼

1、簡介

它是一個輕量級的MVVM框架。
使用數據驅動+組件化來開。
數據雙向綁定(當修改視圖時數據也會賦值給model，當更改model的時候也會反應到視圖上)。
頁面上每個獨立的可視或者可交互的區域均視爲一個組件，每個組件對應一個工程目錄(文件夾)，組件所需要的各種資源儘可能的都放在這個目錄下就近維護(即將模板、樣式、js等都寫在一個.vue文件中)，組件可以嵌套自由組合，形成完整的頁面。

2、vue腳手架初始化項目

# 1.安裝vue-cli腳手架(用於初始化項目)
$ npm install -g vue-cli

# 2. 創建項目
$ vue init webpack <project name>

# 3. 安裝cnpm(此步驟不是必須的)
# 有些npm有些資源被屏蔽或者是國外資源的原因，經常會導致用npm安裝依賴包的時候失敗，所以還需要npm的國內鏡像—cnpm
npm install -g cnpm –registry=https://registry.npm.taobao.org

# 4. 安裝依賴包
$ cd <project name>
# cnpm 需要單獨安裝，如果沒有cnpm可以使用npm來代替，即npm install
$ cnpm install

# 5. 啓動程序就可以在瀏覽器訪問
$ npm run dev

# 6. 在瀏覽器訪問localhost:8080

在進行第二步創建項目是會有一些內容需要手動填寫，具體示例如下：

 ~/Desktop/Vue$ vue init webpack Demo

? Project name [demo] # 項目名稱必須小寫
? Project description [A Vue.js project]
? Author [robot]
? Vue build standalone # 這裏直接敲回車即可
? Install vue-router? [Yes]
? Use ESLint to lint your code? [No]
? Set up unit tests [Yes]
? Pick a test runner jest # 這裏直接敲回車即可
? Setup e2e tests with Nightwatch? [Yes]
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "Demo".

3、腳手架目錄結構

build : webpack相關的配置
config：webpack相關的配置，index.js中可以配置服務的端口，默認是8080, useEslint默認是true，當啓動檢查代碼格式時可以設置爲false
node_module : npm install安裝的依賴代碼庫
src : 源碼文件，開發都會在該目錄下進行
assets: 存放一些靜態資源
components：組件，存放.vue文件，每個組件分爲三部分：template、script、style
router：路由，配置url路徑對應的組件
App.vue
main.js ：entry入口文件
static : 存放一些靜態資源
test：單元測試相關
.babelrc: babel編譯的相關配置
.editorconfig : 編輯器相關的配置(比如字符集、縮進的空格等)
.eslintignore : 配置需要或略的路徑，一般build、config、dist、test等目錄都會配置忽略
.eslintrc.js : 配置代碼格式風格檢查規則, 如每行代碼是否強制使用分號; 代碼縮進是使用空格還是tab等，在啓動工程的時候會進行嚴格的檢查，如果不滿足格式就會啓動失敗，主要是讓所有開發人員保持強一致的開發風格。主要是extends: [“standard”]、rules等配置。
.gitignore : git或略的文件
index.html : 入口文件，編譯時會將其它代碼插入到index.html中
package.json : 項目的配置文件，scripts用於配置的腳本，其中dev和build非常常用，啓動項目就是使用npm run dev命令，這裏的dev就是scripts中的dev, npm start就是對npm run dev的簡寫；devDependencies用於編譯時的依賴，開發時需要，上線時用不到；

4、基本流程

在控制檯中輸入npm run dev,然後在瀏覽器上訪問http://localhost:8080/#/helloworld
通過router/index.js配置好的/helloworld路徑(path)找到對應的組件(component) HelloWorld.vue

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

Vue.use(Router)

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

HelloWorld.vue 就是要訪問的內容

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

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'HelloWorld.vue'
    }
  }
}
</script>

<!-- style 標籤省略了 -->

HelloWorld.vue的內容將會替換到App.vue中

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<!-- style 標籤省略了 -->

App.vue的內容將會注入到index.html中的body標籤裏

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

最終的效果如圖

1、Vue 入門介紹

一、Vue 技術棧

二、node.js

（一）簡介

（二）運行一個helloworld.js

（三）運行一個簡單的http服務

1、index.js

2、運行index.js

4、在瀏覽器上訪問`http://localhost:8080`

三：npm

（一）簡介

（二）如何安裝npm

（三）如何生成package.json文件

四：webpack

（一）簡介

（二）webpack安裝

（三）webpack中的重要功能

1、devtool

2、webpack-dev-server

3、loaders

4、babel(很重要)

5、plugins

6、webpack配置文件

五：vue.js是什麼

1、簡介

2、vue腳手架初始化項目

3、腳手架目錄結構

4、基本流程

5、鏈表(linked list)

13、策略模式

9、門面（外觀）模式

8、哈希表(hashtable)

4、循環隊列(circle queue)

Mac下配置sublime實現LaTeX

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

linux以太網驅動總結

1、Vue 入門介紹

一、Vue 技術棧

二、node.js

（一）簡介

（二）運行一個helloworld.js

（三）運行一個簡單的http服務

1、index.js

2、運行index.js

4、在瀏覽器上訪問http://localhost:8080

三：npm

（一）簡介

（二）如何安裝npm

（三）如何生成package.json文件

四：webpack

（一）簡介

（二）webpack安裝

（三）webpack中的重要功能

1、devtool

2、webpack-dev-server

3、loaders

4、babel(很重要)

5、plugins

6、webpack配置文件

五：vue.js是什麼

1、簡介

2、vue腳手架初始化項目

3、腳手架目錄結構

4、基本流程

4、在瀏覽器上訪問`http://localhost:8080`