第七章 前端工程化（NPM、腳手架、前端環(huán)境搭建）

?

一、支持環(huán)境

二、NPM包管理工具

三、Vue生成器

四、前端的集成環(huán)境

五、項(xiàng)目目錄結(jié)構(gòu)

六、前端Vue框架與后端Django框架的簡(jiǎn)單交互

?

一、node.Js（相當(dāng)于python解釋器）
node.JS：JavaScript解釋器

作用：①用于后端開發(fā)②作為前端工具的支持環(huán)境

下載地址：官網(wǎng)

8.11.4：長(zhǎng)期支持版

10.9.0：最新版本

查看安裝版本：

?

二、NPM包管理工具（相當(dāng)于python中的pip）

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

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

使用方法：在想要下載庫的project文件夾內(nèi)，按住shift＋鼠標(biāo)右鍵，點(diǎn)擊在命令窗口打開

npm install 包名 　　 　　本地安裝（本項(xiàng)目目錄） （資源類）

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

全局目錄位于node.js的安裝目錄內(nèi)

npm uninstall 包名? ? ?　　刪掉本地的包
npm uninstall 包名 -g 　　刪除全局安裝的包

install可以簡(jiǎn)寫成i

?所有的安裝文件都在項(xiàng)目文件project的node_modules文件夾里

?

3.項(xiàng)目初始化

npm init　　創(chuàng)建一個(gè)package.json 里面是對(duì)項(xiàng)目的描述，指定依賴

設(shè)置完畢后點(diǎn)擊yes會(huì)生成如下文件

然后安裝對(duì)應(yīng)的庫，在后面加上--save

npm install 包 --save 下載包的同時(shí)，加入到package.json中的 `dependencies`
npm install 包 --save-dev 下載包的同時(shí)，加入到package.json中的 `devDependencies` 開發(fā)階段的依賴

當(dāng)項(xiàng)目文件上傳到git上時(shí)，無需上傳node_modules內(nèi)的內(nèi)容

下次下載項(xiàng)目文件時(shí)，只需運(yùn)行npm install 就會(huì)把dependencies內(nèi)的內(nèi)容下載下來

?

?

4.模塊化工具

• webpack

• Browserify

把前端所有的資源當(dāng)做模塊，向引入模塊一樣去使用

?

5.自動(dòng)化工具

• grunt

• gulp

• webpack

集成各種應(yīng)用：代碼壓縮、圖片壓縮、編譯sass....

?

三、Vue生成器

Vue生成器：集成了webpack、以及其他各種需要的工具

1.腳手架工具安裝

npm install -g @vue/cli 安裝3.x
npm install -g vue/cli 安裝的2.x

?

2.使用

①vue create 項(xiàng)目名稱? ?自動(dòng)生成項(xiàng)目的目錄

②選擇配置

?

③按1,2,3,4,5,6,7,8,9選擇需要的配置（Babel，Vuex，Router常用）

webpack
babel 　　　　　　　　 把ES6編譯成ES5
eslint 　　 　　　　　　代碼語法規(guī)范
TypeScript 　　　　　　負(fù)責(zé)把TypeScript編譯成JavaScript
Router　　　　　　　　(Vue-router Vue全家桶成員) 路由
Vuex　　? ?　　　　　　(Vue全家桶成員) vue狀態(tài)管理
CSS Pre-processors　　CSS預(yù)處理 會(huì)讓你再次選擇器(SASS、LESS、Stylus...)
Linter / Formatter　　　?語法檢查
Unit Testing 　　　　? ?? 單元測(cè)試
E2E Testing 　　　　? ?? 端到端測(cè)試

④詢問把配置文件中寫到哪個(gè)文件（Inpackage.json）

⑤router是否使用歷史模式

⑥詢問你這個(gè)配置是否在以后的項(xiàng)目中也要使用（no）

⑦創(chuàng)建中

⑧是否使用淘寶鏡像（yes）

?

3.命令

npm run serve 臨時(shí)編譯，創(chuàng)建臨時(shí)服務(wù)器 loacalhost:8080

Local：本地運(yùn)行

Network：臨時(shí)服務(wù)器運(yùn)行

訪問地址

按Ctrl+C可以終止批處理操作

?

npm run build 編譯，生成dist目錄（壓縮html，壓縮圖片，壓縮css，壓縮js等）

dist的內(nèi)容上傳到服務(wù)器上運(yùn)行

?

四、前端的集成環(huán)境

1.前端的集成環(huán)境：WebStorm
?

文本高亮

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

2.前端的集成環(huán)境：Pycharm

文本高亮

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

NPM配置

（1）Edit Configurations

（2）新建NPM

（3）設(shè)置package.json配置文件

（4）運(yùn)行項(xiàng)目

?

五、項(xiàng)目目錄結(jié)構(gòu)

|- node_modules?
|- public
　　|- index.html?
　　|- assets 靜態(tài)文件 圖片、字體
|- src
　　|- components 普通組件(局部)
　　　　|- HelloWorld.vue
　　|- views 頁面組件
　　　　|- Home.vue
　　　　|- About.vue
　　|- main.js 入口
　　|- App.vue 總體結(jié)構(gòu)組件
　　|- router.js 路由設(shè)置
　　|- store.js 狀態(tài)管理?
|- pageage.json

?

六、前端Vue框架與后端Django框架的簡(jiǎn)單交互

場(chǎng)景：

最簡(jiǎn)單的方式實(shí)現(xiàn)數(shù)據(jù)接口傳遞

【前端Vue】

1.創(chuàng)建項(xiàng)目（上面有介紹）

簡(jiǎn)答來說：

npm run serve

npm run build

2.根據(jù)需要在（main.js）內(nèi)引入需要的包or模塊

安裝包or模塊

舉例：npm install axios

main.js引入

3.配置路由（router.js）

4.在Vue自定義的組件（<router-link to="/">xxxxxx</router-link>）內(nèi)使用即可

5.第三步有個(gè)component是指向組件的意思，所以我們需要?jiǎng)?chuàng)建一個(gè)Course.vue的組件

?

6.使用axios與后端交互

<template><div class="course"><p v-for="course in courselist">{{course}}</p><button @click="init">點(diǎn)我</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 // 把當(dāng)前組件的this賦值給_this// 前面已經(jīng)在全局變量出定義$http就是axiosthis.$http.request({url:this.$main+'/course/',method:'get',}).then(function (response) {console.log(this) //undefined//取到對(duì)象，真正的數(shù)據(jù)在data中//這里如果使用this會(huì)取到全局的Vue對(duì)象，會(huì)得到undefined，想得到當(dāng)前組件的數(shù)據(jù)，把this賦值給_this即可 _this.courselist=response.data}).catch(function (response) {console.log(response)})}},mounted:function () {
　　　　　　　// 想要在組件掛載后執(zhí)行的方法，請(qǐng)放在mounted里// 想要訪問頁面就加載從后臺(tái)拿到的內(nèi)容// 就要在生命周期mounted處調(diào)用上面寫的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'])# 存在跨域問題，同源策略攔截，所以設(shè)置下面這句話obj['Access-Control-Allow-Origin'] = '*'return obj

?

轉(zhuǎn)載于:https://www.cnblogs.com/neymargoal/p/9537190.html

總結(jié)

以上是生活随笔為你收集整理的第七章 前端开发——前端工程化（NPM、脚手架、前端环境搭建）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。