代码改变世界

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

2017-05-09 23:13 龙恩0707 阅读(...) 评论(...) 编辑 收藏

阅读目录

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