阅读目录

VUE2 第六天学习--- vue单文件项目构建

VUE单文件组件
在Vue项目中，然后使用 new Vue({el: '#container' }), 在每个页面内指定一个容器元素。使用Vue.component来定义全局组件，这种方式在小规模项目中还可以，但是在项目中有如下缺点：
1. 全局定义：强制要求每个component中的命名不能重复。
2. 字符串模板：缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的 \
3. 不支持css，意味着HTML和javascript组件化时，css明显被遗漏。
4. 没有构建步骤，限制只能使用HTML和ES5 Javascript，而不能使用预处理器。
.vue 单文件组件可以解决上面的所有问题，并且还可以使用 webpack等构建工具。

.vue文件是一个自定义的文件类型，用类HTML语法描述一个Vue组件。每个 .vue文件包含三种类型的顶级语言块 <template>,<script>,和 <style>,如下代码：

<template>

  <div class="example">{{ msg }}</div>

</template>

<script>

export default {

  data () {

    return {

      msg: 'Hello world!'

    }

  }

}

</script>

<style>

.example {

  color: red;

}

</style>

vue-loader 会解析文件，提取每个语言块，通过loader处理，最后将他们组成一个CommonJS模块。module.exports出一个Vue.js组件对象。
vue-loader 支持使用非默认语言，比如css预处理器，预编译的HTML模板语言，通过设置语言块的lang属性。比如如下代码：

<style lang='stylus'>

  /* stylus代码 */

</style>

语言块
<template>
   默认语言： html
   每个.vue文件最多包含一个 <template>块
   内容将被提取为字符串，将编译并用作Vue组件的template选项。

<script>
   默认语言： js(在检测到 babel-loader 或 buble-loader 配置时自动支持ES2015)
   每个.vue文件最多包含一个<script>块。
   该脚本在类CommonJS环境中执行，也可以通过require()其他依赖，在ES2015支持下，可以使用import 和 export 语法。
   脚本必须导出 Vue.js 组件对象。也可以导出由 Vue.extend()创建的扩展对象。但是普通对象将会更好。

<style>
   默认语言：css
   一个 .vue文件可以包含多个 <style> 标签。
   默认情况下，将会使用 style-loader 提取内容，并通过 <style>标签动态加入文档的<head>中，也可以配置将所有style提取到单个的css文件中。

项目构建：
一： 安装项目依赖
npm install --save vue  默认安装最新版vue
npm install --save-dev webpack webpack-dev-server  安装webpack，webpack-dev-server

提示： npm install --save 和 npm install --save-dev的区别，--save 会把依赖包名称添加到 package.json 文件 dependencies 键下，--save-dev 则添加到 package.json 文件 devDependencies 键下，--save-dev 是你开发时候依赖的东西，--save 是你发布之后还依赖的东西。*

npm install --save-dev babel-core babel-loader babel-preset-es2015 安装babel，babel的作用是将es6的语法编译成浏览器认识的语法es5
npm install --save-dev vue-loader vue-template-compiler 用来解析vue的组件，.vue后缀的文件
npm install --save-dev css-loader style-loader stylus-loader 用来解析css

提示：css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

npm install --save-dev url-loader file-loader 用于打包文件和图片
npm install --save-dev vue-router 安装路由

二：项目目录结构如下：

demo                                        # 工程名

|   |--- dist                               # 打包后生成的目录文件

|   |--- node_modules                       # 所有的依赖包

|   |--- src                                # 项目的文件包

|   |    |--- assets                        # styles(样式)，img(图片)的目录文件

|   |    |--- components                    # 一些组件的目录，比如 header.vue 等

|   |    |--- views                         # 存放单个页面所有vue文件

|   |    |--- App.vue                       # 项目的入口文件

|   |    |--- index.js                      # 实例化的js入口文件

|   |    |--- routes.js                     # 路由配置文件

|   |---

|   |--- .babelrc                           # 支持es6

|   |--- .gitignore

|   |--- README.md

|   |--- index.html                         # 首页入口文件

|   |--- package.json

|   |--- webpack.config.js                  # 配置文件

三：项目运行
执行 webpack 打包；
执行 webpack-dev-server 启动服务器；

四：转换命令
把 webpack 和 webpack-dev-server 命令转成 npm 命令；需要安装 cross-env 命令如下：
npm install cross-env --save-dev
然后在package.json 文件添加
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "webpack"

现在可以使用 npm run dev 运行命令。

git上查看demo

VUE2 第六天学习--- vue单文件项目构建的更多相关文章

  1. 如何手动解析vue单文件并预览？

    开头 笔者之前的文章里介绍过一个代码在线编辑预览工具的实现(传送门:快速搭建一个代码在线编辑预览工具),实现了css.html.js的编辑,但是对于demo场景来说,vue单文件也是一个比较好的代码组 ...

  2. Vue单文件组件

    前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...

  3. vue 单文件组件

    在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...

  4. webpack入坑之旅（五）加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  5. （转）Maven学习总结(二)——Maven项目构建过程练习

    孤傲苍狼 只为成功找方法,不为失败找借口! Maven学习总结(二)——Maven项目构建过程练习 上一篇只是简单介绍了一下maven入门的一些相关知识,这一篇主要是体验一下Maven高度自动化构建项 ...

  6. vuejs学习——vue+vuex+vue-router项目搭建(三)

    前言 vuejs学习——vue+vuex+vue-router项目搭建(一) vuejs学习——vue+vuex+vue-router项目搭建(二) 为什么用vuex:组件之间的作用域独立,而组件之间 ...

  7. vuejs学习——vue+vuex+vue-router项目搭建(二)

    前言 最近比较忙,所有第二章发布晚了,不好意思各位. vuejs学习——vue+vuex+vue-router项目搭建(一) 中我们搭建好了vue项目,我相信大家已经体验了vue其中的奥妙了,接下来我 ...

  8. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  9. vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法

    vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法 在vue 里面<style scoped></style> 是为了让样式只影响本身自己组件的样式,不改变全 ...

随机推荐

  1. centos7学习笔记-安装后的一些配置

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一.允许普通用户使用sudo root用户下运行 visudo 在root ALL=(ALL)ALL下面添加 username ...

  2. python之MRO和C3算法

    python2类和python3类的区别pyhon2中才分新式类与经典类,python3中统一都是新式类Python 2.x中默认都是经典类,只有显式继承了object才是新式类python 3.x中 ...

  3. VUE路由转场特效，WebAPP的前进与后退

    一.效果图 二.思路 1. 定义两个 CSS 过度动画,前进与后退: slide-right-enter   和   slide-left-enter 2. 给路由配置meta信息,设置各个路由的级别 ...

  4. tfs 禁止多人签出

    好久没用tfs了,忘了怎么设置了,记录下 编辑----->高级

  5. mysql之Query Cache

    1,QueryCache的实现原理: 1.目前只有select语句会被cache,其他类似show,use的语句则不会被cache. 2.两个SQL语句,只要相差哪怕是一个字符(例如大小写不一样:多一 ...

  6. 导入数据到MongoDB中

    import sys import json import pymongo import datetime from pymongo import MongoClient client = Mongo ...

  7. loadrunner 场景设计-负载生成器管理

    场景设计-负载生成器管理 by:授客 QQ:1033553122 1  简介 当执行一个场景时,Controller把场景中的每个用户配到负载生成器(Load generator). 所谓的负载生成器 ...

  8. MVC与单元测试实践之健身网站(四)-动作管理

    网站后台负责进行动作的管理,包括动作名称.介绍.训练要点.配图等内容,以便前台能够使用这些内容.在上一篇< Fit项目图片上传和云存储的调通>中已经准备好了这里涉及到的主要技术难点,现在就 ...

  9. vue 环境的搭建及初始化项目

    其实超级简单,虽然网上很多,但是我顺便记录下相当于做笔记吧 1nodejs 的安装, 在node官网下载,点击安装,安装的时候最好选择路径在d盘 2设置环境变量 我的电脑-->属性-->系 ...

  10. Python学习—Pycharm连接mysql服务器

    安装pymysql pip3 install pymysql 安装Mysql客户端驱动(基于Pycharm工具) 点击download,下载mysql驱动 等待驱动安装成功后,点击OK即可 创建数据库 ...