前端与移动开发之vue-day6（1）

注意：
有时候使用npm i node-sass -D装不上，这时候，就必须使用 cnpm i node-sass -D
在普通页面中使用render函数渲染组件在webpack中配置.vue组件页面的解析
运行cnpm i vue -S将vue安装为运行依赖；
运行cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖；
运行cnpm i style-loader css-loader -D将解析转换CSS的包安装为开发依赖，因为.vue文件中会写CSS样式；
在webpack.config.js中，添加如下module规则：

module: {

rules: [

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

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

]

}

创建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>

创建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)

});