zoukankan      html  css  js  c++  java
  • 13、VUE单文件工程

    1、为什么要使用单文件工程?

    1、Vue.js路由组件的不方便

    不支持引用HTML页面,以至于template里面定义的标签会编辑器当字符串,这让编辑变的困难。

     

    2、Vue.jsNode.js语言结合

           

     

    2、搭建Vue项目环境

    2.1. 安装Node.js

              简单的说 Node.js 就是运行在服务端的 JavaScript

    Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。

    Node.js是一个事件驱动I/O服务端JavaScript环境,基于GoogleV8引擎,V8引擎执行Javascript的速度非常快,性能非常好。

    Windows上安装 Node.js很方便,只需要访问node.js官网 http://www.nodejs.org/,点击Download链接,然后选择Windows Installer,下载安装包。下载完成后直接双击安装,和其它一般软件安装一样

     

    2.2. 安装Webpack

            Webpacknode.js的一个组件。

            WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(ScssTypeScript等),并将其打包为合适的格式以供浏览器使用。

            安装命令:

            npm install webpack -g  --registry=https://registry.npm.taobao.org

           -g表示全局安装

            因为node.js的组件库位置在国外,因此国内安装的时候会非常慢,所以可以采用镜像的方式来安装(使用淘宝镜像库 --registry=https://registry.npm.taobao.org

    2.3. 安装vue-cli

             Vue-cli是个构建工具,他能大大的降低webpack的使用难度,支持热更新。

             

    vue-cli vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,分为vue init webpack-simple 项目名 和vue init webpack 项目名 两种。

    安装命令:

    npm install vue-cli -g  --registry=https://registry.npm.taobao.org

    2.4. 创建工程

             进入你想要建立的项目的文件夹中,输入以下命令。

             命令:

                vue init webpack my--project

     

     

    2.5. 启动项目

             命令:

              npm install

              -- npm install是用来安装package.json的组件,类似于C#里面的packages.config,只执行一次即可

             npm run dev

              -- 运行

    3、工程目录介绍

     

    3.1. Static目录

    存放的是静态文件,比如字体和图片。

    3.2. Build目录

            存放最终发布的代码文件。

    3.3. Config目录

    存放配置文件。

     

    3.4. Src/assets目录

     

        存放素材文件。

    3.5. Src/components目录

            存放组件文件。

    3.6. Src/router目录

             存放路由文件。

     

    3.7. Package.json目录

    项目的安装的库和版本信息。Npm install 命令就是安装其中里面的库。

    安装后的组件放到了目录node_modules中。

            

    3.8. Index.html目录

     

    有同学就问了,为什么这个页面中不引入咱们之前学习的vue.js文件呢?

    大家要注意,咱们这个这个单文件工程都是由node.js管理,由node.js会加载vue.js,不需要开发人员特别引用vue.js

    那么咱们生成vue对象是在哪里创建的呢?

    答案是在main.js

     

    这里的模板 template名字叫App,那我们就能找到这个App.vue

     

    4、创建vue文件示例

    4.1. 创建vue文件

     

    注意:标签<template>下面有且只有一个标签,不能有多个,有多个会报错。

    报错信息:

     

    4.2. 配置路由

     

    4.3. 查看效果

    5、单元测试

    5.1. Mocha(魔卡)测试框架

             Mocha诞生自2011年,是现在最流行的JS测试框架之一,在浏览器和Node环境中都可以使用。

             所谓的测试框架,就是运行测试的工具。通过她,可以为JS应用添加测试,从而保证代码的质量。

             之前创建单页面应用的时候选用了Mocha测试框架,所以不必再安装。

    测试文件位于/test/unit/specs中。

     

    运行测试:

     

    运行结果:

     

    6、生产环境部署

     

    意思:

    运行npm run dev”的时候执行的是build/dev-server.js文件,

    运行npm run build”的时候执行的是build/build.js文件。

    生产环境部署:

    Npm run build是将vue项目编译。

    Npm start  启动vue项目

    7、Vue.js Ajax(axios)

    Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

    Axios 是一个基于 Promise HTTP 库,可以用在浏览器和 node.js 中。

    Github开源地址: https://github.com/axios/axios

      安装:

           $ npm install axios

     使用:

     

             

  • 相关阅读:
    课程总结
    第十四周课程总结&实验报告
    第十三周课程总结
    第十二周课程总结
    第十一周课程总结
    第十周课程总结
    第七次java实验报告
    第六次java实验报告
    第五次java实验报告
    第四次java实验报告
  • 原文地址:https://www.cnblogs.com/schangxiang/p/11410991.html
Copyright © 2011-2022 走看看