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

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

 

1、支持环境

2、NPM包管理工具

3、Vue生成器

4、前端的集成环境

5、项目目录结构

6、前端Vue框架与后端Django框架的简单交互

 

1、node.Js（至关于python解释器）
node.JS：JavaScript解释器

做用：①用于后端开发②做为前端工具的支持环境

下载地址：官网

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 包名     　　全局安装（命令行工具）

全局目录位于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....

 

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、项目目录结构

|- 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

 

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