13、VUE单文件工程
1、为什么要使用单文件工程?
1、Vue.js路由组件的不方便
不支持引用HTML页面,以至于template里面定义的标签会编辑器当字符串,这让编辑变的困难。
2、Vue.js于Node.js语言结合
2、搭建Vue项目环境
2.1. 安装Node.js
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。
在Windows上安装 Node.js很方便,只需要访问node.js官网 http://www.nodejs.org/,点击Download链接,然后选择Windows Installer,下载安装包。下载完成后直接双击安装,和其它一般软件安装一样
2.2. 安装Webpack
Webpack是node.js的一个组件。
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。
安装命令:
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
使用:
13、VUE单文件工程的更多相关文章
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- VUE2 第六天学习--- vue单文件项目构建
阅读目录 VUE2 第六天学习--- vue单文件项目构建 回到顶部 VUE2 第六天学习--- vue单文件项目构建 VUE单文件组件在Vue项目中,然后使用 new Vue({el: '#cont ...
- Vue单文件组件
前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...
- vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法
vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法 在vue 里面<style scoped></style> 是为了让样式只影响本身自己组件的样式,不改变全 ...
- vue 单文件组件
在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...
- vue单文件中引用路径的处理
原文地址:vue单文件中引用路径的处理如有错误,欢迎指正! vue单文件的开发过程中,在单文件模版中可能会涉及到文件路径的处理,比如 <img>, style 中的 background ...
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
- ts-loader如何与vue单文件组件衔接
.ts-loader是如何与vue单文件组件衔接作用的 https://github.com/microsoft/TypeScript-Vue-Starter https://www.npmjs.co ...
- 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生
第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...
随机推荐
- jQuery基础的动画里面的回调函数
<style> *{margin:0; padding:0;} #target{ border-radius:10px; background:#eee; } .fade{/*动画起始状态 ...
- Java并行程序基础。
并发,就是用多个执行器(线程)来完成一个任务(大任务)来处理业务(提高效率)的方法.而在这个过程中,会涉及到一些问题,所以学的就是解决这些问题的方法. 线程的基本操作: 1.创建线程:只需要new一个 ...
- [Go] golang的用途和windows搭建环境
Golang核心编程: 区块链研发工程师(分布式账本技术,互联网数据库技术,特点是去中心化) Go服务器端/游戏软件工程师(现在主流是C C++,处理日志,数据打包,文件处理,美团后台流量支撑,处理大 ...
- SVN Log命令常用组合【转】
转自:https://blog.csdn.net/xuanwenchao/article/details/8875103 版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请 ...
- Eclipse的server选项卡中找不到tomcat配置项
1.在Eclipse中,如果想开发j2ee,必须要先安装插件.至于具体的插件安装方法,这里不再赘述. 2.当进行到配置tomcat服务器的时候,有时候会出现这种情况: 3.在server选项卡的Run ...
- 前端之CSS(下)
文本属性 ## 文字对齐 #text-align属性规定元素中文本的水平对齐方式 left: 左边对齐 默认值 right: 右对齐 center: 居中对齐 justify: 两端对齐 ## 文字装 ...
- LeetCode 21. Merge Two Sorted Lists合并两个有序链表 (C++)
题目: Merge two sorted linked lists and return it as a new list. The new list should be made by splici ...
- ISerializable接口
继承ISerializable接口可以灵活控制序列化过程 格式化器的工作流程:格式化器再序列化一个对象的时候,发现对象继承了ISerializable接口,那它就会忽略掉类型所有的序列化特性,转而调用 ...
- Linux性能优化实战学习笔记:第三十一讲
一.上节回顾 上一节,我们一起回顾了常见的文件系统和磁盘 I/O 性能指标,梳理了核心的 I/O 性能观测工具,最后还总结了快速分析 I/O 性能问题的思路. 虽然 I/O 的性能指标很多,相应的性能 ...
- MySQL实战45讲学习笔记:第二十四讲
一.引子 在前面的文章中,我不止一次地和你提到了 binlog,大家知道 binlog 可以用来归档,也可以用来做主备同步,但它的内容是什么样的呢?为什么备库执行了 binlog 就可以跟主库保持一致 ...