第七章前端开发——前端工程化（NPM、脚手架、前端环境搭建）

第七章前端工程化（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 包名 　　全局安装（命令行工具）

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）运行项目

五、项目目录结构

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

第七章 前端开发——前端工程化（NPM、脚手架、前端环境搭建）

第七章前端开发——前端工程化（NPM、脚手架、前端环境搭建）