Vue基础前瞻

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文件在浏览器中运行
• 单文件组件即一个文件就是一个组件，进而支持组件复用
• 内容： + +
  • 1: template中只能有一个根节点
  • 2：script 中 按照export default{配置} 来写
  • 3：style中,可以设置scoped属性，让其只在template中生效

附录：
     单文件组件是vue.js里面的一种特殊形式,以.vue扩展名结尾,单文件组件包含了某个组件以及定义该组件功能的js代码和定义该组件样式的css代码

1-4 Vue.js基础入门

1. IE 8以下版本不支持，支持的浏览器仅限于可以兼容 ECMAScript 5 的浏览器
2. 引入脚本文件：
3. helloworld 示例程序

    
    

          
{{ message }}
    

1-5. Vue.js两个重要特征：

   1.  *关注视图层,让我们不再关注前端的东西,从而让我们只关注内部的代码逻辑*
   2.  *组件系统，让我们灵活使用组件,支持组件复用*

---

2 Vue.js搭建开发环境与目录结构介绍

2-1. Vue.js如何搭建开发环境

1. 安装 node.js
2. 安装cnpm

安装cnpm是因为使用npm install安装包时速度很慢，所以建议安装cnpm后使用cnpm install来安装包

3. 安装vue-cli

vue-cli是搭建项目的脚手架,可以搭建开发环境,稍后将介绍 开发环境的开发目录

4. 使用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里面)

---

2-2-2. build目录的目录结构

图1-4.PNG

其他的我目前没有用到,目前涉及到的是webpack.base.conf.js里面有关于端口的介绍

---

组件复用
1. 自定义组件：

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '
这是个待办项
'
})

  
  

上面的代码仅仅是提供某个代办项而已,如果有多个组件,仅仅是简单重复，如果需要让某个组件内容动态化，可以这么写

  

    
    
    
  


Vue.component('todo-item', {
  props: ['todo'], //自定义属性
  template: '
{{ todo.text }}
'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

---