zoukankan      html  css  js  c++  java
  • 第七章 前端开发——前端工程化(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 包名       全局安装(命令行工具)

    全局目录位于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就是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
  • 相关阅读:
    《玩转.NET Micro Framework 移植基于STM32F10x处理器》内容介绍
    《玩转.NET Micro Framework 移植基于STM32F10x处理器》前言
    《玩转.NET Micro Framework 移植基于STM32F10x处理器》内容介绍
    《玩转.NET Micro Framework 移植基于STM32F10x处理器》微软中国.NET Micro Framework项目组工程师所作之序
    《玩转.NET Micro Framework 移植基于STM32F10x处理器》资源汇总
    《玩转.NET Micro Framework 移植基于STM32F10x处理器》微软中国.NET Micro Framework项目组工程师所作之序
    《玩转.NET Micro Framework 移植基于STM32F10x处理器》前言
    Windows、Linux、ARM、Android、iOS全平台支持的RTMP推流组件libEasyRTMP库接口调用说明
    简单高效易用Windows/Linux/ARM/Android/iOS平台实现RTMP推送组件EasyRTMPAndroid MediaCodec硬编码流程介绍
    RTSP网络监控摄像头如何实现Windows、Linux、ARM、Android、iOS全平台支持的拉RTSP流推出RTMP直播流?
  • 原文地址:https://www.cnblogs.com/neymargoal/p/9537190.html
Copyright © 2011-2022 走看看