•
Coder

Vue.js项目 部件简介 (未完待续)

🦋 目前国内前端MVVM最火的框架.. 前段时间写了一个About页面, 这几天顺带整理一下知识点.

Vue.js

Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的.
类似的有Angular.js.

  • 可以建立DOM和数据之间的绑定
  • 可以按功能/组件抽离HTML代码

相关
Vue 项目实践 - 持续更新

功能部分

基础

  • 数值默认双向绑定
  • 支持 条件语法特性/功能函数/生命周期
  • 动态设定style/class
  • 捆绑event
  • 渲染生命周期

高级

  • 单页面组件
  • 自定义指令
  • 单元测试
  • 插件

单文件组件.vue

定义:

1
2
3
4
5
6
7
8
<template>
  <h1>This is title</h1>
</template>
<script>
  export default {
    name: 'Title'
  }
</script>

使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <Title></Title>
  </div>
</template>
<script>
  import Title from './components/Title'
  export default {
    name: 'app',
    components: {
      Title
    }
  }
</script>

Vue Router

扩展 Vue
按字面意思来看为Vue 路由
其实质也就是用于单页应用管理页面跳转, 负责路径解析.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})

Vuex

扩展 Vue
当开发大型项目时, 为防止 Vue 太过臃肿, 使用 Vuex 管理数据状态.

webpack

一款模块加载器兼打包工具
使用模块的理念来处理 JS/CSS/图片等资源文件

指令

1
2
3
4
5
6
7
8
9
# 安装
npm install webpack --save-dev
# 执行
webpack
   --display-error-details # 输出详细错误
   --watch # 实时监听并自动打包
   --config <file> # 指定配置文件打包
   -p # 压缩打包
   -d # 生成map映射文件

配置(webpack.config.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
  // 插件
  plugins: [],
  // 页面入口
  entry: {},
  // 入口文件输出位置, 即处理后的文件存放位置
  output: {},
  module: {
    // 文件处理加载器
    rules: []
  },
  // 额外处理
  resolve: {
    // 自动扩展文件后缀, require时可以进行省略
    extensions: [],
    // 模块定义别名, require时可以进行路径省略, 直接使用别名
    alias: {}
  }
}

入口文件(main.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'
// 引入js, 加载器会自动进行处理
import holderjs from 'holderjs'
// 引入 css/scss, 加载器会自动进行处理
import appScss from './assets/app.scss'
import fontAwesomeCss from './assets/font-awesome-4.7.0/css/font-awesome.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

未完待续ing

, ,
分享到