第七章前端開發——前端工程化（NPM、腳手架、前端環境搭建）

時間 2019-11-17

標籤第七前端開發工程 npm 腳手架環境搭建简体版

原文原文鏈接

第七章前端工程化（NPM、腳手架、前端環境搭建）css

1、支持環境html

2、NPM包管理工具前端

3、Vue生成器vue

4、前端的集成環境node

5、項目目錄結構python

6、前端Vue框架與後端Django框架的簡單交互jquery

1、node.Js（至關於python解釋器）
node.JS：JavaScript解釋器webpack

做用：①用於後端開發②做爲前端工具的支持環境ios

下載地址：官網git

8.11.4：長期支持版

10.9.0：最新版本

查看安裝版本：

2、NPM包管理工具（至關於python中的pip）

1.NPM包管理工具集成在node.js中，無需安裝。

2.前端的一切資源均可以都過npm下載包括各類前端工具(webpack\grunt...) 各類前端資源(jquery\bootstrap...)

使用方法：在想要下載庫的project文件夾內，按住shift＋鼠標右鍵，點擊在命令窗口打開

npm install 包名 　　　　本地安裝（本項目目錄）（資源類）

npm install -g 包名 　　全局安裝（命令行工具）

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.模塊化工具

webpack
Browserify

把前端全部的資源當作模塊，向引入模塊同樣去使用

5.自動化工具

grunt
gulp
webpack

集成各類應用：代碼壓縮、圖片壓縮、編譯sass....

3、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的內容上傳到服務器上運行

4、前端的集成環境

1.前端的集成環境：WebStorm

文本高亮

file——settings——plugins——搜索vue.js

2.前端的集成環境：Pycharm

文本高亮

file——settings——plugins——搜索vue.js

NPM配置

（1）Edit Configurations

（2）新建NPM

（3）設置package.json配置文件

（4）運行項目

5、項目目錄結構

6、前端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