阅读目录

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. Java基础——Oracle（七）

    一.概述 pl/sql (procedural lanaguage/sql)是 oracle 在标准 sql 上的扩展 .不仅允许嵌入sql 语言,还可以定义变量和常量,允许使用条件语句和循环语句,允 ...

  2. Java基础——Ajax（一）

    学习之前举一个简单的小栗子,让我们简单了解一下Ajax的应用与好处.一般网站都会有自己的数据库,用来单独存储用户的个人信息,平时我们在注册账号的时候会遇到信息输入的页面,假设第一个输入信息是用户名的填 ...

  3. 【Java深入研究】2、JDK 1.8 LinkedList源码解析

    LinkedList是一个实现了List接口和Deque接口的双端链表. 有关索引的操作可能从链表头开始遍历到链表尾部,也可能从尾部遍历到链表头部,这取决于看索引更靠近哪一端. LinkedList不 ...

  4. Android ThreadPoolExecutor线程池

    引言 Android的线程池概念来自于Java的Executor,真正的线程池实现为ThreadPoolExecutor.在Android中,提供了4类不同的线程池,具体下面会说到.为什么使用线程池呢 ...

  5. 纯css3实现的动画导航菜单

    测试咯 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特 ...

  6. Flash饼状图统计代码

    index.html文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  7. canvas-2lineCap.html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 在EXT框架中，使用JS文件设置UEditor文本框，出现新增内容很多，页面变型，不出现滚动条，导致无法进行操作。

    找到UEditor的配置文件:ueditor.config.js(这是我的项目的UEditor的配置文件名) 找到参数设置 autoHeightEnabled 是否自动增长参数,默认为TRUE 当默认 ...

  9. CSS之HTML meta viewport属性详解

    什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机 ...

  10. docker 安装软件

    Docker Docker官方网址: https://docs.docker.com/  英文地址 Docker中文网址: http://www.docker.org.cn/ 中文地址 Docker是 ...