第七章 前端工程化（NPM、腳手架、前端環境搭建）
一、支持環境
二、NPM包管理工具
三、Vue生成器
四、前端的集成環境
五、項目目錄結構
六、前端Vue框架與后端Django框架的簡單交互
一、node.Js（相當於python解釋器）
node.JS：JavaScript解釋器
作用：①用於后端開發②作為前端工具的支持環境
下載地址：官網
8.11.4：長期支持版
10.9.0：最新版本
查看安裝版本：
二、NPM包管理工具（相當於python中的pip）
1.NPM包管理工具集成在node.js中，無需安裝。
2.前端的一切資源都可以都過npm下載 包括 各種前端工具(webpack\grunt...) 各種前端資源(jquery\bootstrap...)
使用方法：在想要下載庫的project文件夾內，按住shift＋鼠標右鍵，點擊在命令窗口打開
npm install 包名 本地安裝（本項目目錄） （資源類）
npm install -g 包名 全局安裝（命令行工具）
全局目錄位於node.js的安裝目錄內
npm uninstall 包名 刪掉本地的包
npm uninstall 包名 -g 刪除全局安裝的包
install可以簡寫成i
所有的安裝文件都在項目文件project的node_modules文件夾里
3.項目初始化
npm init 創建一個package.json 里面是對項目的描述，指定依賴
設置完畢后點擊yes會生成如下文件
然后安裝對應的庫，在后面加上--save
npm install 包 --save 下載包的同時，加入到package.json中的 `dependencies`
npm install 包 --save-dev 下載包的同時，加入到package.json中的 `devDependencies` 開發階段的依賴
當項目文件上傳到git上時，無需上傳node_modules內的內容
下次下載項目文件時，只需運行npm install 就會把dependencies內的內容下載下來
4.模塊化工具
-
-
Browserify
把前端所有的資源當做模塊，向引入模塊一樣去使用
5.自動化工具
-
-
gulp
-
webpack
集成各種應用：代碼壓縮、圖片壓縮、編譯sass....
三、Vue生成器
Vue生成器：集成了webpack、以及其他各種需要的工具
1.腳手架工具安裝
npm install -g @vue/cli 安裝3.x
npm install -g vue/cli 安裝的2.x
2.使用
①vue create 項目名稱 自動生成項目的目錄
②選擇配置
③按1,2,3,4,5,6,7,8,9選擇需要的配置（Babel，Vuex，Router常用）
webpack
babel 把ES6編譯成ES5
eslint 代碼語法規范
TypeScript 負責把TypeScript編譯成JavaScript
Router (Vue-router Vue全家桶成員) 路由
Vuex (Vue全家桶成員) vue狀態管理
CSS Pre-processors CSS預處理 會讓你再次選擇器(SASS、LESS、Stylus...)
Linter / Formatter 語法檢查
Unit Testing 單元測試
E2E Testing 端到端測試
④詢問把配置文件中寫到哪個文件（Inpackage.json）
⑤router是否使用歷史模式
⑥詢問你這個配置是否在以后的項目中也要使用（no）
⑦創建中
⑧是否使用淘寶鏡像（yes）
3.命令
npm run serve 臨時編譯，創建臨時服務器 loacalhost:8080
Local：本地運行
Network：臨時服務器運行
訪問地址
按Ctrl+C可以終止批處理操作
npm run build 編譯，生成dist目錄（壓縮html，壓縮圖片，壓縮css，壓縮js等）
dist的內容上傳到服務器上運行
四、前端的集成環境
1.前端的集成環境：WebStorm
文本高亮
file——settings——plugins——搜索vue.js
2.前端的集成環境：Pycharm
文本高亮
file——settings——plugins——搜索vue.js
NPM配置
（1）Edit Configurations
（2）新建NPM
（3）設置package.json配置文件
（4）運行項目
五、項目目錄結構
|- node_modules
|- public
|- index.html
|- assets 靜態文件 圖片、字體
|- src
|- components 普通組件(局部)
|- HelloWorld.vue
|- views 頁面組件
|- Home.vue
|- About.vue
|- main.js 入口
|- App.vue 總體結構組件
|- router.js 路由設置
|- store.js 狀態管理
|- pageage.json
六、前端Vue框架與后端Django框架的簡單交互
場景：
最簡單的方式實現數據接口傳遞
【前端Vue】
1.創建項目（上面有介紹）
簡答來說：
npm run serve
npm run build
2.根據需要在（main.js）內引入需要的包or模塊
安裝包or模塊
舉例：npm install axios
main.js引入
3.配置路由（router.js）
4.在Vue自定義的組件（<router-link to="/">xxxxxx</router-link>）內使用即可
5.第三步有個component是指向組件的意思，所以我們需要創建一個Course.vue的組件
6.使用axios與后端交互
<template> <div class="course"> <p v-for="course in courselist"> {{course}} </p> <button @click="init">點我</button> </div> </template> <script> export default { data:function () { return{ courselist:[] } }, methods:{ init:function () { console.log(this) // VueComponent {_uid: 7, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …} let _this = this // 把當前組件的this賦值給_this // 前面已經在全局變量出定義$http就是axios this.$http.request({ url:this.$main+'/course/', method:'get', }).then(function (response) { console.log(this) //undefined //取到對象，真正的數據在data中 //這里如果使用this會取到全局的Vue對象，會得到undefined，想得到當前組件的數據，把this賦值給_this即可 _this.courselist=response.data }).catch(function (response) { console.log(response) }) } }, mounted:function () {
// 想要在組件掛載后執行的方法，請放在mounted里 // 想要訪問頁面就加載從后台拿到的內容 // 就要在生命周期mounted處調用上面寫的init方法 this.init() } } </script>
【后端Django】
settings.py配置上的app配置上restframework
urls.py
urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^course/',views.Course.as_view()), ]
views.py
from django.shortcuts import render from rest_framework.views import APIView from rest_framework.response import Response # Create your views here. class Course(APIView): def get(self,request): obj = Response(['python','Linux']) # 存在跨域問題，同源策略攔截，所以設置下面這句話 obj['Access-Control-Allow-Origin'] = '*' return obj