第七章 前端工程化（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下载 包括 各种前端工具(webpackgrunt...) 各种前端资源(jqueryootstrap...)
使用方法：在想要下载库的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