阅读目录

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. mongodb 权限设置--用户名、密码、端口

    转自:http://www.cnblogs.com/valor-xh/p/6369432.html 一.关于权限的默认配置 在默认情况下,mongod是监听在0.0.0.0之上的,任何客户端都可以直接 ...

  2. Linux常用基本命令：三剑客命令之-awk 三元表达式

    awk 3元表达式,if...else结构都可以用3元表达式改写 ghostwu@dev:~/linux/awk$ awk -v FS=":" '{ type=$3>=100 ...

  3. MySQl创建用户和授权

    权限的管理: 如何创建用户和密码 给当前的用户授权 移除当前用户的权限 首先进去到mysql数据库下: mysql> use mysql Database changed 其次, 对新用户进行增 ...

  4. FIFO、LRU、LFU的含义和原理

    含义: FIFO:First In First Out,先进先出LRU:Least Recently Used,最近最少使用 LFU:Least Frequently Used,最不经常使用 以上三者 ...

  5. Flume初入门简单配置与使用

    1.Flume在集群中扮演的角色 Flume.Kafka用来实时进行数据收集,Spark.Storm用来实时处理数据,impala用来实时查询. 2.Flume框架简介 1.1 Flume提供一个分布 ...

  6. SyntaxError: JSON.parse: bad control character in string literal at line 1 column 16 of the JSON data

    JSON.parse转化Json字符串时出现:SyntaxError: JSON.parse: bad control character in string literal at line 1 co ...

  7. LVS主从部署配置和使用

    LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统.本项目在1998年5月由章文嵩博士成立,是中国国内最早出现的自由软件项目之一. LVS是L ...

  8. Info.plist的CFBundleIdentifier、CFBundleName、BundleDisplayName

    plist关键字段: CFBundleIdentifier:应用包名.唯一标识 CFBundleVersion:文件版本号,可以每次发版本递增 CFBundleShortVersionString:a ...

  9. [20180713]关于hash join 测试中一个疑问.txt

    [20180713]关于hash join 测试中一个疑问.txt --//上个星期做的测试,链接: http://blog.itpub.net/267265/viewspace-2157424/-- ...

  10. 【HANA系列】SAP HANA XS的JavaScript API详解

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS的Java ...