1. 前言
1-1. webpack
webpack是一个模块打包工具，在开发中，各种各样的资源都可以认为是一种独特的模块资源，比如css，js，png，json等。而我们通过webpack，可以将这些资源打包压缩在指定的文件中，需要注意的是，webpack本身是支持js资源的，但我们可以通过loader加载器，来打包除了js之外的资源。
具体安装以及使用方法请参考相关文档。
1-2. 关于Es6
ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现
ES6的目标，是使得JavaScript语言可以用来编写大型的复杂的应用程序，成为企业级开发语言。
对于Vue.js来说，IE 8以下版本不支持，支持的浏览器仅限于可以兼容 ECMAScript 5(即Es5) 的浏览器
1-3. Vue.js中的单文件组件
- 以.vue扩展名结尾的文件，最终会通过webpack编译成*.js文件在浏览器中运行
- 单文件组件即一个文件就是一个组件，进而支持组件复用
- 内容：<template></template> + <script></script> + <style></style>
- 1: template中只能有一个根节点
- 2：script 中 按照export default{配置} 来写
- 3：style中,可以设置scoped属性，让其只在template中生效
附录：
单文件组件是vue.js里面的一种特殊形式,以.vue扩展名结尾,单文件组件包含了某个组件以及定义该组件功能的js代码和定义该组件样式的css代码
<template>
<div>
<!--在这里面组装相关组件(自定义组件或html标签)-->
</div>
</template>
<script>
<!--在这里面定义组件功能-->
</script>
<style>
<!--在这里面定义组件样式-->
</style>
1-4 Vue.js基础入门
- IE 8以下版本不支持，支持的浏览器仅限于可以兼容 ECMAScript 5 的浏览器
- 引入脚本文件：<script src="https://unpkg.com/vue"></script>
- helloworld 示例程序
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }}</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
1-5. Vue.js两个重要特征：
1. *关注视图层,让我们不再关注前端的东西,从而让我们只关注内部的代码逻辑*
2. *组件系统，让我们灵活使用组件,支持组件复用*
2 Vue.js搭建开发环境与目录结构介绍
2-1. Vue.js如何搭建开发环境
- 安装 node.js
- 安装cnpm
安装cnpm是因为使用npm install安装包时速度很慢，所以建议安装cnpm后使用cnpm install来安装包
- 安装vue-cli
vue-cli是搭建项目的脚手架,可以搭建开发环境,稍后将介绍 开发环境的开发目录
- 使用vue-cli创建项目
创建开发环境的命令是 vue init webpack firstproject(这个命令将在当前目录下创建一个名为firstproject的工程)
- vue-cli有点投机取巧,如果想彻底弄懂vue.js的开发,建议从webpack-->ES 6-->vue-loader/vue-loader-compiler一步一步来
- cd firstproject
- cnpm run dev //运行工程 运行成功的界面如图1-1。以后代码若需要修改,运行该命令就可以重新加载页面
- 采用Vue-cli运行项目的童鞋，可以将: 你的项目目录/build/webpack.dev.base.js有关Eslint的内容注释掉，因为这样可以越过代码审查
2-2. Vue.js在搭建完开发环境之后的目录结构及必要文件介绍
在vue-cli执行完 vue init webpack firstproject命令之后,会创建一个名为firstproject的目录，该目录下的目录结构如图所示
其中对我们目前最重要的是src、build、index.html、package.json。其他的也很重要，不过本人并未研究，不敢下定论
| 文件或目录名 | 作用 |
|---|---|
| src | 存放源代码,稍后将详细介绍 |
| build | 存放相关的启动端口信息以及其他的一些服务器信息 |
| index.html | 当我们输入http://localhost:8081默认访问的页面 |
| package.json | 很重要的文件,使用Vue-cli生成,和webpack有关系。一般不需要改动 |
2-2-1. src的目录结构
| 文件或目录名 | 作用 |
|---|---|
| App.vue | 单文件组件,index.html里面显示的就是App这个组件,由main.js配置 |
| components | 该目录下存放我们自定义的组件 |
| main.js | 功能包含组件的注册,全局组件的声明,构建vue实例(将我们的App.vue渲染到html中对应的div里面) |
2-2-2. build目录的目录结构
其他的我目前没有用到,目前涉及到的是webpack.base.conf.js里面有关于端口的介绍
组件复用
1. 自定义组件：
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
})
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item></todo-item>
</ol>
上面的代码仅仅是提供某个代办项而已,如果有多个<todo-item>组件,仅仅是简单重复，如果需要让某个组件内容动态化，可以这么写
<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item" //因为自定义了todo,所以可以使用
v-bind:key="item.id">
</todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'], //自定义属性
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
