阅读目录

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. Why is one loop so much slower than two loops?

    Question: Suppose a1, b1, c1, and d1 point to heap memory and my numerical code has the following co ...

  2. PHP FastCGI进程管理器PHP-FPM的架构

    一个master进程,支持多个pool,每个pool由master进程监听不同的端口,pool中有多个worker进程.每个worker进程都内置PHP解释器,并且进程常驻后台,支持prefork动态 ...

  3. Ajax实现的城市二级联动二

    上一篇联动一种只是城市用ajax请求获取并渲染,这里将省份也用ajax请求并渲染 1.HTML <select id="province"> <option> ...

  4. Python全栈学习_day003作业

    day3作业及默写 1,有变量name = "aleX leNb" 完成如下操作: 1) 移除 name 变量对应的值两边的空格,并输出处理结果 print(name.strip( ...

  5. filter(ele)过滤数组

    filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素. 例如,在一个Array中,删掉偶数,只保留奇数,可以这么写: function remove(arr) { l ...

  6. loadrunner 脚本开发-文件下载

    脚本开发-文件下载 by:授客 QQ:1033553122 下载简介 对 HTTP协议来说,无论是下载文件或者请求页面,对客户端来说,都只是发出一个GET请求,并不会记录点击后的“保存”.“另存为操作 ...

  7. MVC与单元测试实践之健身网站(六)-计划的添加与重置

    健身计划需要使用者自己定制,没有现成的内容可供选择.本篇就是关于健身计划的添加与重置功能的一部分. 一 功能描述 a) 关于计划的定制,决定以周期的方式,比如有人会以一周为周期,然后安排每周的1.3. ...

  8. 数组中的逆序对(Java实现)

    来源:剑指offer 逆序对定义:a[i]>a[j],其中i<j 思路:利用归并排序的思想,先求前面一半数组的逆序数,再求后面一半数组的逆序数,然后求前面一半数组比后面一半数组中大的数的个 ...

  9. windows下安装Erlang

    由于RabbitMQ是用Erlang编写的,因此需要先安装Erlang环境,建议安装的版本新一点.下载地址点我试试 我这里下载的V20.3 x64版本,下载后点击开始安装,基本是一路next(默认设置 ...

  10. LeetCode题解之Binary Tree Pruning

    1.题目描述 2.问题分析 使用递归 3.代码 TreeNode* pruneTree(TreeNode* root) { if (root == NULL) return NULL; prun(ro ...