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的内容注释掉，因为这样可以越过代码审查

关闭Eslint.png

图1-1.PNG

2-2. Vue.js在搭建完开发环境之后的目录结构及必要文件介绍

在vue-cli执行完 vue init webpack firstproject命令之后,会创建一个名为firstproject的目录，该目录下的目录结构如图所示

图1-2.PNG

其中对我们目前最重要的是src、build、index.html、package.json。其他的也很重要，不过本人并未研究，不敢下定论

文件或目录名	作用
src	存放源代码,稍后将详细介绍
build	存放相关的启动端口信息以及其他的一些服务器信息
index.html	当我们输入http://localhost:8081默认访问的页面
package.json	很重要的文件,使用Vue-cli生成,和webpack有关系。一般不需要改动

2-2-1. src的目录结构

图1-3.PNG

文件或目录名	作用
App.vue	单文件组件,index.html里面显示的就是App这个组件,由main.js配置
components	该目录下存放我们自定义的组件
main.js	功能包含组件的注册,全局组件的声明,构建vue实例(将我们的App.vue渲染到html中对应的div里面)

图1-4.PNG

其他的我目前没有用到,目前涉及到的是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: '随便其它什么人吃的东西' }
    ]
  }
})

Vue基础前瞻