python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)...

python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

昨日内容回顾

0. 组件注意事项！！！
    data属性必须是一个函数！

1. 注册全局组件
    Vue.component('组件名',{
        template: ``
    })
    
    var app = new Vue({
        el: '#app'
    })
2. 注册局部组件
    var app = new Vue({
        el: '#app',
        components:{
            局部组件名:{
                template: `...`
            }
        }
    })
3. 传值
    1. 父组件 --> 子组件
        1. 父组件通过 v-bind:变量='值'
        2. 子组件需要通过props 声明我需要的变量
    2. 子组件 --> 父组件
        子组件通过触发自定义事件的方式向外传递信息
        1. 子组件： this.$emit('自定义事件')
        2. 父组件： v-on:自定义事件='方法名'
        
    3. 组件间传值
        1. 补充：Vue实例的生命周期钩子函数(共8个)
            1. beforeCreate    --> 数据属性声明但没有赋值
            2. created         --> 数据属性赋值
            3. beforeMount     --> 页面上的 {{name}} 还没有被渲染
            4. mounted         --> 页面上的 {{name}} 被替换成真正的内容
            ...
            
        2. 基于bus对象实现
    
4. 插槽（slot）
    插槽是占位置的！！！
    插槽多了可以起名字，进行区分！   --> 'heihei'>嘿嘿！
    根本不显示
    
5. 组件的注意事项：
    1. 特殊的组件需要使用is语法声明一下 比如 table、select、ul等内部使用的组件
    2. 捕获子组件的原生事件

View Code

解析 DOM 模板时的注意事项

有些 HTML 元素，诸如 

、
、 和 ，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 
1. 、
 和 ，只能出现在其它某些特定的元素内部。

这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

这个自定义组件  会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：

is="blog-post-row">

需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：

• 字符串 (例如：template: '...')
• 单文件组件 (.vue)

View Code

打开网页，效果如下：

查看html代码，发现它提升到外部了。通俗来讲，就是漂移到table外面了

使用is特性

"en">

    "UTF-8">
    


"app">
    "1">
        is=zsq>

View Code

刷新网页，效果如下：

查看html代码，这样就正常了

 

将原生事件绑定到组件

也就是

触发原生事件

你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符：

"onFocus">

在有的时候这是很有用的，不过在你尝试监听一个类似  的非常特定的元素时，这并不是个好主意。比如上述  组件可能做了如下重构，所以根元素实际上是一个  元素：

  {{ label }}
  <input
    v-bind="$attrs"
    v-bind:value="value"
    v-on:input="$emit('input', $event.target.value)"
  >

View Code

这时，父级的 .native 监听器将静默失败。它不会产生任何报错，但是 onFocus 处理函数不会如你预期地被调用。

为了解决这个问题，Vue 提供了一个 $listeners 属性，它是一个对象，里面包含了作用在这个组件上的所有监听器。例如：

{
  focus: function (event) { /* ... */ }
  input: function (value) { /* ... */ },
}

View Code

有了这个 $listeners 属性，你就可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。对于类似  的你希望它也可以配合 v-model 工作的组件来说，为这些监听器创建一个类似下述 inputListeners 的计算属性通常是非常有用的：

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  computed: {
    inputListeners: function () {
      var vm = this
      // `Object.assign` 将所有的对象合并为一个新对象
      return Object.assign({},
        // 我们从父级添加所有的监听器
        this.$listeners,
        // 然后我们添加自定义监听器，
        // 或覆写一些监听器的行为
        {
          // 这里确保组件配合 `v-model` 的工作
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }
  },
  template: `
    
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
    
  `
})

View Code

现在  组件是一个完全透明的包裹器了，也就是说它可以完全像一个普通的  元素一样使用了：所有跟它相同的特性和监听器的都可以工作。

 

举例：第一种写法，使用.native修饰符

"en">

    "UTF-8">
    


"app">
    'hehe'>

View Code

刷新网页，点击按钮，效果如下：

举例：第二种写法，绑定自定义事件

"en">

    "UTF-8">
    


"app">
    
    'hehe'>

View Code

刷新网页，点击按钮，效果同上！

针对这2种写法，推荐使用第一种！

 

一、Vue实例的生命周期

实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

比如 created 钩子可以用来在一个实例被创建之后执行代码：

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

View Code

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

 

生命周期图示

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

 

Vue的生命周期，就是从Vue实例被创建开始到实例销毁时的过程，整个过程主要可以分为八个阶段分别是：

1. 创建前（beforeCreate）
2. 已创建（created）
3. 编译前（beforeMount）
4. 编译后（mounted）
5. 更新前（beforeUpdate）
6. 更新后（update）
7. 销毁前（beforeDestroy）
8. 销毁后（destroyed）

以上各个阶分别会有对应的“钩子函数”以Vue实例的选项的形式存在。

 

Vue提供的生命周期钩子如下：

①　beforeCreate

在实例初始化之后，数据观测(data observer，开始监控Data对象数据变化)和初始化事件(init event，Vue内部初始化事件)之前被调用。

②　created

在实例已经创建完成之后被调用。实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，event事件回调。挂载阶段尚未开始，$el 属性不可见。

③　beforeMount

在挂载开始之前被调用。相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

④　mounted

在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。此时模板中的html渲染到了html页面中，此时一般可以做一些Ajax操作。注意mounted只会执行一次。

⑤　beforeUpdate

在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

⑥　updated

在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

⑦　beforeDestroy

在实例销毁之前调用。实例仍然完全可用。

⑧　destroyed

在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

 

关于Vue生命周期的详细解释，请参考文章：

https://www.cnblogs.com/penghuwan/p/7192203.html

这篇文章，写的非常详细，大家可以观摩一下！

 

如果有想做Vue开发的，vue生命周期必问。大概描述一下Vue实例被创建开始到实例销毁时的过程，就可以了！

 

二、组件间通信之中央事件总线bus

摘要

中央事件总线 - 就是一个名字可以叫做bus的vue空实例,里边没有任何内容； var bus = new Vue(); 人如其名，她就像一个公交车一样，来回输送人，将a站点的A输送到b站点，再将b站点的B输送到a站点； 这里a，b站点就像父、子组件，也像兄、弟组件，或者像两个没有任何亲戚关系的任何组件； 而A,B就像是各个组件内部要传输的数据或者要执行的命令信息，靠bus来通信。

 

中央事件总线 - 就是一个名字可以叫做bus的vue空实例,里边没有任何内容；

var bus = new Vue();

人如其名，她就像一个公交车一样，来回输送人，将a站点的A输送到b站点，再将b站点的B输送到a站点；

这里a，b站点就像父、子组件，也像兄、弟组件，或者像两个没有任何亲戚关系的任何组件；

而A,B就像是各个组件内部要传输的数据或者要执行的命令信息，靠bus来通信。

 

如果有父子组件通信知识基础的，应该记得当初父子组件通信，父组件中用$on监听,子组件中用$emit发射。

现如今父子组件(或任何其他关系的两个组件之间)达成一致协议：

将监听和发射的工作交给了bus来搞，就好像他们两头不自驾接送了，改乘公交了自己出发自己回家了。

那局面就是下边这样

$on和$emit现在绑在bus上了

bus.$emit(‘同名自定义事件名’，‘$on发送过来的数据’)；

在a站点（第一个组件）中的methods方法里，准备用bus的$emit发射事件任务。

bus.$on(‘自定义事件名’，function(){
    //然后执行什么你自己懂的。。。
})；

在b站点（另一个组件）实例初始化（mounted钩子中）时，用bus的$on监听自家$emit触发的事件。

Bus实例扩展：

可以再添加data、methods、computed等选项，在初始化时让bus获取一下，任何组件都可以公用了。就像公交车上的座位，只要有座谁都能坐。

可以包括一些共享通用的信息：比如用户登录的姓名、性别、邮箱等，还有油壶授权的token等。

 

举例：

"en">

    "UTF-8">
    


"app">
    
    

    

View Code

刷新网页，效果如下：

 、

 

一、Vue Router

Vue Router中文文档

https://router.vuejs.org/zh/

介绍

Vue全家桶：Vue + VueRouter + VueX

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

 

先来看一个网页

点击不同的选项时，页面并没有刷新。如何判断页面有没有刷新呢？看浏览器左侧这个按钮，有没有闪动。

虽然看到url地址变化了，但它并没有刷新。这个，就是用vue实现的！

起步

用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。下面是个基本例子：

基本使用

必须先引用vue.js，再引用vue-router.js

"en">

    "UTF-8">
    



"app">
    
    
    
    
    
    "/index">index页面
    "/home">home页面
    

    
    
    

View Code

刷新网页，效果如下：

 

动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

const User = {
  template: '
User'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

View Code

现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

const User = {
  template: '
User {{ $route.params.id }}'
}

你可以看看这个在线例子。

你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：

 

模式	匹配路径	$route.params
/user/:username	/user/evan	{ username: 'evan' }
/user/:username/post/:post_id	/user/evan/post/123	{ username: 'evan', post_id: 123 }

 

除了 $route.params 外，$route 对象还提供了其它有用的信息，例如，$route.query (如果 URL 中有查询参数)、$route.hash 等等。你可以查看 API 文档 的详细说明。

 

举例：显示xx的页面

"en">

    "UTF-8">
    



"app">
    
    
    
    
    
    "/user/zly">赵丽颖
    "/user/hx">韩雪
    

    
    
    

View Code

刷新网页，效果如下：

举例2： 获取url中的年龄和爱好

比如： file:///E:/python_script/Vue/test.html#/user/hx?age=18&hobby=sing

"en">

    "UTF-8">
    



"app">
    
    
    
    
    
    "/user/zsp">赵丽颖
    "/user/hx">韩雪
    

    
    
    

View Code

刷新网页，访问以下url:

file:///E:/python_script/Vue/test.html#/user/hx?age=18&hobby=看电影

注意：后面的参数是手动加的！效果如下：

 

嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

借助 vue-router，使用嵌套路由配置，就可以很简单地表达这种关系。

接着上节创建的 app：

 html代码

"app">
  

View Code

js代码:

const User = {
  template: '
User {{ $route.params.id }}'
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

View Code

这里的  是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 。例如，在 User 组件的模板添加一个 ：

const User = {
  template: `
    
class="user">
      
User {{ $route.params.id }}
      
    

  `
}

View Code

要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的  中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的  中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

View Code

要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。

你会发现，children 配置就是像 routes 配置一样的路由配置数组，所以呢，你可以嵌套多层路由。

此时，基于上面的配置，当你访问 /user/foo 时，User 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个 空的 子路由：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的  中
        { path: '', component: UserHome },

        // ...其他子路由
      ]
    }
  ]
})

View Code

 

举例：点击用户后，展示用户详细信息，并能点击查看

"en">

    "UTF-8">
    



"app">
    
    
    
    
    
    "/user/zsp">赵丽颖
    "/user/hx">韩雪
    

    
    
    

View Code

刷新网页，效果如下：

总结：

1. 基本使用
    1. 必须导入vue-router.js文件
    2. 要有VueRouter()实例
    3. 要把VueRouter实例挂载到Vue实例中
    
    4. 路由的入口
        '/index'>index页面
    5. 路由的出口
        
2. 路由的参数
    1. path: '/user/:name' --> 匹配路由
    $route.params.name     --> 取值
    
    2. /user/alex?age=9000 --> url中携带参数
    $route.query.age       --> 取出url的参数
    
3. 子路由
    children:[
        {
            path: '',
            component: {
                template: `...`
            }
        }
    ]
    
    'info' append>

View Code

 

四、webpack模板

官方文档：

https://vuejs-templates.github.io/webpack/

介绍

这个样板是针对大型，严肃的项目，并假设您有点熟悉Webpack和vue-loader。请务必阅读常用工作流程配方vue-loader的文档。

如果您只想尝试vue-loader或制作快速原型，请使用webpack-simple模板。

快速开始

要使用此模板，请使用vue-cli构建项目。建议使用npm 3+以获得更高效的依赖树。

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

vue-cli 是进行vue开发的脚手架工具，方便快速生成一个vue项目

 

先来查看node和npm的版本

C:\Users\xiao>node -v
v10.7.0

C:\Users\xiao>npm -v
6.1.0

新建一个文件夹vue-cli_demo，进入到此目录

C:\Users\xiao>e:

E:\>cd E:\python_script\Vue\vue-cli_demo

安装vue-cli，-g表示全局

E:\python_script\Vue\vue-cli_demo>npm install -g vue-cli
npm WARN deprecated coffee[email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Users\xiao\AppData\Roaming\npm\vue -> C:\Users\xiao\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
C:\Users\xiao\AppData\Roaming\npm\vue-init -> C:\Users\xiao\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
C:\Users\xiao\AppData\Roaming\npm\vue-list -> C:\Users\xiao\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
+ [email protected]
added 252 packages from 218 contributors in 29.948s

查看vue版本

E:\python_script\Vue\vue-cli_demo>vue -V
2.9.6

基于webpack模板创建项目mysite

E:\python_script\Vue\vue-cli_demo>vue init webpack mysite

提示项目名，直接回车

? Project name (mysite)

 项目描述，直接回车

? Project name mysite
? Project description (A Vue.js project)

 作者，直接回车

? Project name mysite
? Project description A Vue.js project
? Author (xiao <[email protected]>)

 这个时候，文字是有颜色的，表示选中状态，可以用光标上下移动。选择默认的Runtime + 即可！

 是否安装vue-router，直接回车

? Project name mysite
? Project description A Vue.js project
? Author xiao <[email protected]>
? Vue build standalone
? Install vue-router? (Y/n)

是否使用ESLint来编写代码？输入n

它是javascript代码检测工具，必须遵循一定的规则才行，否则会有提示！

对于初学者而言，不建议开启，否则写代码会很痛苦的！

? Project name mysite
? Project description A Vue.js project
? Author xiao <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n

设置单元测试，输入n

单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作。

为了快速开发，直接关闭掉

? Project name mysite
? Project description A Vue.js project
? Author xiao <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests (Y/n) n

 是否使用Nightwatch设置e2e测试，输入n

Nightwatch.js是一个测试web app和web 站点的自动化测试框架， 使用Node.js编写， 基于Selenium WebDriver API.

它是一个完整的浏览器端真实用户场景测试解决方案， 致力于简化继续集成和编写自动化测试。

小白表示一脸懵逼，关闭掉！

? Project name mysite
? Project description A Vue.js project
? Author xiao <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n

 最后提示，使用npm安装组件

 直接回车即可

 上面的选项，是一条最简单的路。初学时，使用最简单的即可！

 

下面就表示开始安装了，耐心等待几分钟！

出现finished，表示安装成功

根据提示，执行2个命令，启动项目

 它会开启本机的8080端口，通过即可

 提示运行的应用在 http://localhost:8080

 访问url，效果如下：

 

项目结构

.
├── build/                       # webpack 配置文件
│   └── ...
├── config/
│   ├── index.js                # 主项目配置
│   └── ...
├── src/
│   ├── main.js                 # app 入口文件
│   ├── App.vue                 # 主应用程序组件
│   ├── components/             # ui组件
│   │   └── ...
│   └── assets/                 # 模块资产（由webpack处理）
│       └── ...
├── static/                     # 纯静态资产（直接复制）
├── test/
│   └── unit/                   # 单元测试
│   │   ├── specs/              # 测试规范文件
│   │   ├── eslintrc            # eslint的配置文件，仅用于单元测试的额外设置
│   │   ├── index.js            # 测试构建入口文件
│   │   ├── jest.conf.js        # 使用Jest进行单元测试时的配置文件
│   │   └── karma.conf.js       # 使用Karma进行单元测试时测试运行器配置文件
│   │   ├── setup.js            # 在Jest运行单元测试之前运行的文件
│   └── e2e/                    # e2e测试
│   │   ├── specs/              # 测试规范文件
│   │   ├── custom-assertions/  # e2e测试的自定义断言
│   │   ├── runner.js           # 测试运行脚本
│   │   └── nightwatch.conf.js  # 测试运行器配置文件
├── .babelrc                    # babel 配置
├── .editorconfig               # 缩进，空格/制表符和编辑器的类似设置
├── .eslintrc.js                # eslint 配置
├── .eslintignore               # eslint 忽略规则
├── .gitignore                  # 默认的忽略设置
├── .postcssrc.js               # postcss 配置
├── index.html                  # index.html 模板
├── package.json                # 构建脚本和依赖项
└── README.md                   # 默认 README 文件

View Code

主要几个文件说明：

build/

此目录包含开发服务器和生产webpack构建的实际配置。通常，您不需要触摸这些文件，除非您想要自定义Webpack加载器，在这种情况下您应该查看build/webpack.base.conf.js。

config/index.js

这是主要配置文件，它公开了构建设置的一些最常见的配置选项。有关详细信息，请参阅开发期间的API代理和与后端框架集成。

src/

这是您的大多数应用程序代码所在的位置。如何构建此目录中的所有内容在很大程度上取决于您; 如果您使用的是Vuex，则可以参考Vuex应用程序的建议。

static/

此目录是您不希望使用Webpack处理的静态资产的转义窗口。它们将直接复制到生成webpack构建资产的同一目录中。

有关详细信息，请参阅处理静态资产。

test/unit

包含单元测试相关文件。有关详细信息，请参阅单元测试

test/e2e

包含e2e测试相关文件。有关更多详细信息，请参阅端到端测试。

index.html

这是我们单页面应用程序的模板 index.html。在开发和构建期间，Webpack将生成资产，这些生成的资产的URL将自动注入此模板以呈现最终的HTML。

package.json

包含所有构建依赖项和构建命令的NPM包元文件。

 

构建命令

所有构建命令都通过NPM脚本执行。

npm run dev

启动Node.js本地开发服务器。有关详细信息，请参阅开发期间的API代理。

• Webpack + vue-loader用于单个文件Vue组件。
• 状态保持热重载
• 状态保留编译错误覆盖
• 使用ESLint进行Lint-on-save
• 来源地图

npm run build

为生产建立资产。有关更多详细信息，请参阅与后端框架集成。

• 使用UglifyJS v3缩小JavaScript 。
• 用html-minifier缩小HTML。
• 将所有组件中的CSS提取到单个文件中并使用cssnano缩小。
• 所有静态资产都使用版本哈希编译，以实现高效的长期缓存，并index.html使用适当的URL自动生成生产，以生成这些生成的资产。

npm run unit

使用Jest在JSDOM中运行单元测试。有关详细信息，请参阅单元测试

• 在测试文件中支持ES2015 +。
• 轻松嘲笑。

npm run e2e

使用Nightwatch运行端到端测试。有关更多详细信息，请参阅端到端测试。

• 在多个浏览器中并行运行测试。
• 使用一个开箱即用的命令：
  • 自动处理Selenium和chromedriver依赖项。
  • 自动生成Selenium服务器。

npm run lint

运行eslint并报告代码中的任何linting错误。请参阅Linter配置

 

修改默认的页面

先停止vue项目

安装bootstrap，执行版本为3.3.7。-D表示当前项目安装

E:\python_script\Vue\vue-cli_demo\mysite>npm install [email protected] -D

再开启vue项目

E:\python_script\Vue\vue-cli_demo\mysite>npm run dev

 

查看package.json，搜索bootstrap

它会自动增加一行

进入node_modules目录，里面有一个bootstrap文件夹

 

 进入mysite\src，这里面才是我们需要编辑的文件

文件说明：

 main.js                  # app 入口文件
 App.vue                 # 主应用程序组件
 components/          # ui组件
 assets/                  # 模块资产（由webpack处理）

查看App.vue文件内容，它由3部分组成

         html代码
             js代码
               css代码

修改App.vue，导入bootstrap的css文件

View Code

查看网页，效果如下：

 

 注意：修改代码时，网页会自动加载，不需要刷新页面！

 

作业：

使用vue-cli，实现下面的效果：

修改App.vue，代码如下：

View Code

访问网页，效果如下：

 

posted @ 2018-07-26 16:19 肖祥 阅读( ...) 评论( ...) 编辑 收藏