阅读目录

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. 性能监控(1)--linux下的top命令

    Linux下的监控工具 top命令 top命令能够实时显示系统中各个进程的资源占用情况,其输出信息分为两部分,前半部分为系统统计信息,后半部分是进程信息. 第一行是任务队列信息,它的结果等同于upti ...

  2. Modular Inverse（zoj3609+欧几里德）

    Modular Inverse Time Limit: 2 Seconds      Memory Limit: 65536 KB The modular modular multiplicative ...

  3. 列表与for循环

    一.list列表 1.概述 变量:使用变量存储数据,但是,有一个缺点:一个变量每次只能存储一个数据 #需求:存储5个人的年龄,求他们的平均年龄 age1 = 29 age2 = 36 age3 = 3 ...

  4. npm install权限问题，报错：permission denied。

    1.部署gulp项目时,nodeJs和gulp都已经正确安装,在项目内部执行npm install命令时,有些gulp的插件一直下载不成功,报错几种以下错误: “gulp-imagemin: Coul ...

  5. 反编译Apk得到Java源代码

    原文章转载自:http://hi.baidu.com/%CB%BF%D4%B5%CC%EC%CF%C2/blog/item/2284e2debafc541e495403ec.html 本人转载自:ht ...

  6. PullToRefreshGridView上拉刷新，下拉加载

    PullToRefreshGridView上拉刷新,下拉加载 布局: <?xml version="1.0" encoding="utf-8"?> ...

  7. Fiddler抓包使用教程-模拟低速网络环境

    转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/73467267 本文出自[赵彦军的博客] 在无线测试中,网络测试是必不可少的环节,通 ...

  8. 洗礼灵魂，修炼python（49）--巩固篇—包

    包(Package) 这个其实前面也说过的,不过同模块一样,没有具体的解析 1.什么是包 在创建许许多多模块后,我们可能希望将某些功能相近的文件组织在同一文件夹下,那么此文件夹(目录)即为包,文件夹( ...

  9. TERADATA数据库操作

    1.创建一个数据库的命令举例: ,spool; 注释:该命令创建了一个测试数据库testbase,其永久表空间为200mb,spool空间不能超过100mb.在teradata数据库系统的缺省方式下, ...

  10. SQL Server 中的回滚

    USE [TestDB] GO /****** 对象: Table [dbo].[Person] 脚本日期: 11/23/2008 13:37:48 ******/ SET ANSI_NULLS ON ...