VUE2 第六天学习--- vue单文件项目构建
2017-05-09 23:13 龙恩0707 阅读(4931) 评论(4) 编辑 收藏 举报阅读目录
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 运行命令。
