在普通页面中使用render函数渲染组件
<script>
var login = {
template: '<h1>这是登录组件</h1>'
}
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
render: function (createElements) { // createElements 是一个 方法，调用它，能够把 指定的 组件模板，渲染为 html 结构
return createElements(login)
// 注意：这里 return 的结果，会 完全替换 页面中 el 指定的那个 容器
}
});
</script>
在使用webpack构建的Vue项目中使用模板对象？
在普通网页中如何使用vue：
- 使用 script 标签 ，引入 vue 的包
- 在 index 页面中，创建 一个 id 为 app div 容器
- 通过 new Vue 得到一个 vm 的实例
在webpack 中使用 Vue：
注意：在 webpack 中， 使用 import Vue from ‘vue’ 导入的 Vue 构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供 像网页中那样的使用方式；
第一种修改方式：
在webpack.config.js中添加resolve属性：
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
第二种修改方式：
把Main.js里的import Vue from 'vue’改为 import Vue from ‘…/node_modules/vue/dist/vue.js’
包的查找规则：
- 找 项目根目录中有没有 node_modules 的文件夹
- 在 node_modules 中 根据包名，找对应的 vue 文件夹
- 在 vue 文件夹中，找 一个叫做 package.json 的包配置文件
- 在 package.json 文件中，查找 一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】
在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.vue组件页面：
<template>
<!-- 注意：在 .vue 的组件中，template 中必须有且只有唯一的根元素进行包裹，一般都用 div 当作唯一的根元素 -->
<div>
<h1>这是APP组件 - {{msg}}</h1>
<h3>我是h3</h3>
</div>
</template>
<script>
// 注意：在 .vue 的组件中，通过 script 标签来定义组件的行为，需要使用 ES6 中提供的 export default 方式，导出一个vue实例对象
export default {
data() {//组件里面的data必须是function
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',
//let 函数名 = (参数1,参数2) => {函数体}
//若函数体只有一句，默认return
//匿名函数。如果参数不是一个，就需要用括号()括起来： createElements参数简写成c
render: c => c(App)
});
ES6中语法使用总结
- 使用
export default和export导出模块中的成员; 对应ES5中的module.exports和export
export default，一个模块只允许向外导出一次成员，可以使用任意的变量接收
import m222, { title as title123, content } from ‘./test.js’
使用 export 向外暴露的成员，只能使用 { } 的形式来接收，必须严格按照 导出时候的名称。
export 可以向外暴露多个成员， 同时，如果某些成员，我们在 import 的时候，不需要，则可以 不在 {} 中定义
使用 export 导出的成员，如果 就想 换个 名称来接收，可以使用 as 来起别名；
-
使用
import ** from **和import '路径'还有import {a, b} from '模块标识'导入其他模块 -
使用箭头函数：
(a, b)=> { return a-b; } -
在复制大项目的时候，先运行npm install 安装依赖包，尽量排除Nodemodules文件体积大,里面可能有一些内部操作不能用，包通过package.json安装
在vue组件页面中，集成vue-router路由模块
vscode中可以安装插件vetur和vue 2 snippets
- 导入路由模块：
import VueRouter from 'vue-router'
- 安装路由模块：
Vue.use(VueRouter);
- 导入需要展示的组件:
import login from './components/account/login.vue'
import register from './components/account/register.vue'
- 创建路由对象:
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register', component: register }
]
});
//路由嵌套：带有子路由
var router = new VueRouter({
routes: [
{
path: '/account',
component: account,
children: [
{ path: 'login', component: login },
{ path: 'register', component: register }
]
},
{ path: '/goodslist', component: goodslist }
]
})
- 将路由对象，挂载到 Vue 实例上:
var vm = new Vue({
el: '#app',
// render: c => { return c(App) }
render(c) {
return c(App);
},
//render 会把 el 指定的容器中，所有的内容都清空覆盖，所以 不要 把 路由的 router-view 和 router-link 直接写到 el 所控制的元素中
router // 将路由对象，挂载到 Vue 实例上
// 注意： App 这个组件，是通过 VM 实例的 render 函数渲染出来的， render 函数如果要渲染组件， 渲染出来的组件只能放到 el: '#app' 所指定的元素中；
// Account 和 GoodsList 组件， 是通过路由匹配监听到的，所以这两个组件只能展示到属于路由的 <router-view></router-view> 中去；
});
- 改造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>
普通的 style 标签只支持普通的样式，如果想要启用 scss 或 less ，需要为 style 元素，设置 lang 属性
只要style标签，是在.vue组件中定义的，那么推荐都为 style 开启 scoped 属性,只对当前vue组件有效
抽离路由为单独的模块
注意路径
// 在main.js里导入 自定义路由模块
import router from ‘./router.js’
// router.js里注意把需要Import的都引入，在router.js里把路由对象导出去
export default router
