Vue day6

注意：

有时候使用npm i node-sass -D装不上，这时候，就必须使用 cnpm i node-sass -D

在普通页面中使用render函数渲染组件

render

在webpack中配置.vue组件页面的解析

1. 运行cnpm i vue -S将vue安装为运行依赖；

2. 运行cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖；

3. 运行cnpm i style-loader css-loader -D将解析转换CSS的包安装为开发依赖，因为.vue文件中会写CSS样式；

4. 在webpack.config.js中，添加如下module规则：

module: {

    rules: [

      { test: /\.css$/, use: ['style-loader', 'css-loader'] },

      { test: /\.vue$/, use: 'vue-loader' }

    ]

  }

5. 创建App.js组件页面：

<template>

  <!-- 注意：在 .vue 的组件中，template 中必须有且只有唯一的根元素进行包裹，一般都用 div 当作唯一的根元素 -->

  <div>

    <h1>这是APP组件 - {{msg}}</h1>

    <h3>我是h3</h3>

  </div>

</template>



<script>

// 注意：在 .vue 的组件中，通过 script 标签来定义组件的行为，需要使用 ES6 中提供的 export default 方式，导出一个vue实例对象

export default {

  data() {

    return {

      msg: 'OK'

    }

  }

}

</script>



<style scoped>

h1 {

  color: red;

}

</style>

6. 创建main.js入口文件：

// 导入 Vue 组件

import Vue from 'vue'



// 导入 App组件

import App from './components/App.vue'



// 创建一个 Vue 实例，使用 render 函数，渲染指定的组件

var vm = new Vue({

  el: '#app',

  render: c => c(App)

});

在使用webpack构建的Vue项目中使用模板对象？

1. 在webpack.config.js中添加resolve属性：

   resolve: {
       alias: {
         'vue$': 'vue/dist/vue.esm.js'
       }
     }

ES6中语法使用总结

1. 使用 export default 和 export 导出模块中的成员; 对应ES5中的 module.exports 和 export

2. 使用 import ** from ** 和 import '路径' 还有 import {a, b} from '模块标识' 导入其他模块

3. 使用箭头函数：(a, b)=> { return a-b; }

在vue组件页面中，集成vue-router路由模块

vue-router官网

1. 导入路由模块：

import VueRouter from 'vue-router'

2. 安装路由模块：

Vue.use(VueRouter);

3. 导入需要展示的组件:

import login from './components/account/login.vue'

import register from './components/account/register.vue'

4. 创建路由对象:

var router = new VueRouter({

  routes: [

    { path: '/', redirect: '/login' },

    { path: '/login', component: login },

    { path: '/register', component: register }

  ]

});

5. 将路由对象，挂载到 Vue 实例上:

var vm = new Vue({

  el: '#app',

  // render: c => { return c(App) }

  render(c) {

    return c(App);

  },

  router // 将路由对象，挂载到 Vue 实例上

});

6. 改造App.vue组件，在 template 中，添加router-link和router-view：

<router-link to="/login">登录</router-link>

<router-link to="/register">注册</router-link>



<router-view></router-view>

组件中的css作用域问题

<style lang="scss" scoped>
/* 普通的 style 标签只支持 普通的 样式，如果想要启用 scss 或 less ，需要为 style 元素，设置 lang 属性 */
// 只要 咱们的 style 标签， 是在 .vue 组件中定义的，那么，推荐都为 style 开启 scoped 属性
<style>

抽离路由为单独的模块

抽离小案例