环境安装&脚手架生成

  1. npm install -g vue-cli
  2. vue init webpack vue_demo
  3. cd vue_demo
  4. npm install
  5. npm run dev

访问: http://localhost:8080/ , 即可看到最简单效果。

项目打包

  1. npm run build

发布1：使用静态服务器工具包

  1. npm install -g serve
  2. serve dist

发布2：使用动态web服务器（tomcat）

  1. 修改配置：webpack.prod.conf.js
  2. output:{
  3.   publicPath:'/xxx'
  4. }
  5. 重新打包
  6. npm run build
  7. 将dist文件夹命名为项目名：xxx
  8. 将xxx拷贝到运行tomcat的webapps目录下
  9. 访问：http://localhost:8080/xxx

目录理解 & 新增Router

  • router目录下index.js文件 ： 就是路由确认有哪些接口可访问。
  • app.vue是全局底层模版，相当于一般Footer和Header，其中 是代码嵌入的地方。
  • 试图新增一个H文件和help目录看看
  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import HelloWorld from '@/components/HelloWorld'
  4. import H from '@/components/H' //新增
  6. Vue.use(Router)
  8. export default new Router({
  9.   routes: [
  10.     {
  11.       path: '/',
  12.       name: 'HelloWorld',
  13.       component: HelloWorld
  14.     },
  16.     { //新增
  17.       path: '/help', //新增
  18.       name: 'H', //新增
  19.       component: H //新增
  20.     }
  21.   ]
  22. })
  • 新增components/H.vue文件
  1. <template>
  2.   <div class="hello">
  3.     <h1>{{ msg }}</h1>
  4.   </div>
  5. </template>
  7. <script>
  8. export default {
  9.   name: 'H',
  10.   data () {
  11.     return {
  12.       msg: 'WWWWWWWWWWW to Your Vue.js App'
  13.     }
  14.   }
  15. }
  16. </script>
  18. <!-- Add "scoped" attribute to limit CSS to this component only -->
  19. <style scoped>
  20. h1, h2 {
  21.   font-weight: normal;
  22. }
  23. ul {
  24.   list-style-type: none;
  25.   padding: 0;
  26. }
  27. li {
  28.   display: inline-block;
  29.   margin: 0 10px;
  30. }
  31. a {
  32.   color: #42b983;
  33. }
  34. </style>

访问：http://localhost:8080/#/help

基本概念

  1. 不要在子组件中直接修改父组件的状态数据。
  2. 数据在哪，更新数据的行为（函数）就应该定义在哪。

组件间通信方式

  1. props
  2. vue的自定义事件
    1. 通过v-on绑定
    2. 通过$on()绑定
    3. 触发事件
  3. 消息订阅与发布（pubSubJS库）
    1. PubSub.subscribe(‘msg’,function(msg,data){})函数
    2. PubSub.publish(‘msg’,data)函数
  4. slot
    1. 用于父组件向子组件传递·标签数据·
  5. vue-ajax
    1. axios库

vue UI组件库

  1. 常用：Mint UI，Element

常规需求：

  1. 数据状态变化？
  2. URL跳转？

理解VueJS的MVVM

  1. data Binding和view（dom）、model(plain JAvascript Objects)分开。
  2. v-bind：数据绑定
  3. v-on：事件绑定
  4. 条件渲染（v-if）
  5. 循环列表语句（v-for）
  6. 事件处理（@click）
  7. Vue实例生命周期（create -> mount -> update -> destory）
  8. 过渡 & 动画
  9. 过滤器（Vue.filter）
  10. 注册全局指令，注册局部指令。
  11. 自定义插件（plugin）