第七章 前端工程化（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.模块化工具

• webpack

• Browserify

把前端所有的资源当做模块，向引入模块一样去使用

5.自动化工具

• grunt

• 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就是axiosthis.$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