一、普通网页中使用Vue（Vue基础学习）
- 使用
<script></script>标签引入vue的包 - 页面中创建一个容器（id为app的div）
- 通过
new Vue创建Vue的vm实例
二、webpack工程中使用Vue——组件
-
npm i vue -S安装Vue的包，入口JS导入vue的包import Vue from 'vue'。
1、使用普通网页使用Vue的方式
- 页面创建容器，定义组件模板对象，
new Vue创建Vue实例，components注册组件。
此时运行会报错，因为导入的是runtime-only的Vue包，不是最全的（普通网页导入的是全的）。
import Vue from 'vue'和var Vue = require('vue')查找规则一样：找项目根目录node_moudules文件夹，根据引用时的包名查找文件夹vue，在vue文件夹中找到一个 package.json 的包的配置文件，此配置文件中找到main属性（制定了此包在被加载import/require时的入口文件）。
其中，同目录下的 vue.js 才是网页直接导入时的最全的包。 - 可以修改Vue的配置文件 package.json 的 main 属性指向 vue.js 最全文件
"main": "dist/vue.js"；或import导入时直接指定vue.js最全文件import Vue from '../node_modules/vue/dist/vue.js'；或者在 webpack.config.js 配置文件对象中加resolve属性（优雅一些）。
module.exports = {
resolve : {
alias:{ //修改Vue被导入时包的路径
'vue$':'vue/dist/vue.js' //导入的包是以vue结尾，则取找此js文件
}
}
}
2、直接runtime-only
- 创建 .vue 文件（在src目录创建，和main.js同级，测试用），这是一个纯粹的vue组件。webpack中推荐使用.vue这个模板文件定义组件。分三部分，
<template></template>组件的html代码；<script></script>逻辑；<style></style>样式。 -
npm i vue-loader vue-template-compiler -D。webpack 无法打包 .vue 文件，则需要安装相关的第三方loader帮助把vue文件解析成JS文件。 - webpack.config.js 配置文件增加匹配规则，vue-loader 15+都是需要伴生 VueLoaderPlugin。
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
plugins:[
// make sure to include the plugin for the magic
new VueLoaderPlugin()
],
module:{
rules:[
{
test:/\.vue$/, //匹配.vue文件
use:'vue-loader'
}
]
}
}
- main.js 使用 import 引入此vue组件。
import login from './login.vue'
则就得到一个组件的模板对象 login（和直接定义一个模板对象差不多）。
- 如果还是使用components注册组件，然后页面标签引入（传统、vue基础学习形式），还是会报runtime-only的错误。Vue结合webpack使用，想通过vue实例渲染一个组件到页面，只能用render函数实现。
import Vue from 'vue'
import login from './login.vue'
var vm = new Vue({
el: '#app',
data: {
msg: '测试'
},
render: c => c(login)
})
三、导入模块和向外暴露成员
- Node.js，向外暴露成员：
module.exports = {}
exports
- Node.js，导入模块（成员）：
const 名称= require('模块标识符');
- ES6，向外暴露成员：
export default //在一个模块中，只允许向外暴露一次，可以用任意变量接收
export //可以向外暴露多个成员，只能使用 {} 接收（按需接收，严格按暴露变量名称接收，也可别名）
//这两种可以同时使用
测试：新建一个test.js，向外暴露成员
var info = {
name: 'qiurx',
age: '24'
}
export default info
export var title = '标题'
export var content = '呵呵'
- ES6，通过规范形式，导入/导出模块：
import 模块名 from '模块标识符'
import '表示路径'
测试：在main.js用import导入test.js，拿到暴露的对象（导入名称自定）
import test,{ title,content as happy} from './test.js'
console.log(test); //{name: "qiurx", age: "24"}
console.log(title); //标题
console.log(happy); //呵呵
四、.vue文件定义data/methods
<template>
<div>
<h1>登陆组件——{{msg}}</h1>
</div>
</template>
<script>
export default {
data() {
//组件中的data指向函数
return { msg: "123" };
},
methods: {
show() {
console.log("调用了login.vue的方法");
}
}
};
</script>
<style>
</style>
五、使用vue-router
-
npm i vue-router -S，安装路由的包。 - 在模块化工程中（webpack等），必须通过
Vue.use()明确安装路由功能（script标签不需要）。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
- 创建一个App.vue组件，import导入，render渲染组件。
- 创建两个组件（.vue），import导入并创建路由对象，挂载到vue实例。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//导入App组件
import app from './App.vue'
//导入登陆注册组件
import login from './main/login.vue'
import register from './main/register.vue'
//创建路由对象
var router = new VueRouter({
routes:[
{
path:'/login',
component:login
},{
path:'/register',
component:register
}
]
});
var vm = new Vue({
el: '#app',
data: {
},
render: c => c(app), //注意：render会把el指定容器全覆盖，el容器内部东西没作用（不写router-view等）
router //路由对象挂在到vue实例
})
- 展示组件。通过render渲染的组件会直接清空覆盖此容器，最后展示的就是此组件App.vue，所以要把
<router-view></router-view>等写到此组件中。
<template>
<div>
<h1>App</h1>
<router-link to="/login">登陆</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
六、路由嵌套
入口JS（main.js）引入注册组件的子组件，然后增加子路由匹配规则。
//导入注册的子组件
import idCardReg from './mainChild/idCardReg.vue'
import phoneReg from './mainChild/phoneReg.vue'
//创建路由对象
var router = new VueRouter({ {
path: '/register',
component: register,
children: [{ //路由嵌套
path: 'idCardReg',
component: idCardReg
},
{
path: 'phoneReg',
component: phoneReg
}
]
}]
});
注册组件需要嵌套其他组件，则需要在注册组件中创建链接。
<template>
<div>
<h1>注册组件</h1>
<router-link to='/register/idCardReg'>身份证</router-link>
<router-link to='/register/phoneReg'>手机号</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
七、.vue组件样式
- 普通的 style 标签只支持普通的样式，想要使用sass或less，需要增加
lang属性为scss/less - 组件 style 中的样式默认是全局样式，适用于页面所有
- style 标签中增加
scoped属性 （作用域），即为此组件的私有样式（包括自己的子组件、内部元素），一般都会加。是vue给元素自定义了属性，设置样式的时候通过属性选择器设置样式。
<template>
<div>
<h1>id注册</h1>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
div {
color: red;
}
</style>
八、抽离路由模块
现在，会发现main.js的入口JS文件代码量会多了，主要路由的量比较大。把导入路由组件和创建路由对象抽离出去。
创建一个 router.js ，导入vue-router包，把导入路由组件、创建路由对象抽离放到这里；然后把路由对象暴露出去。
import VueRouter from 'vue-router'
//导入登陆注册组件
import login from './main/login.vue'
import register from './main/register.vue'
//导入注册的子组件
import idCardReg from './mainChild/idCardReg.vue'
import phoneReg from './mainChild/phoneReg.vue'
//创建路由对象
var router = new VueRouter({
routes: [{
path: '/login',
component: login
}, {
path: '/register',
component: register,
children: [{
path: 'idCardReg',
component: idCardReg
},
{
path: 'phoneReg',
component: phoneReg
}
]
}]
});
export default router //把路由对象暴露出去
mian.js中再导入此自定义路由模块。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//导入App组件
import app from './App.vue'
//导入 自定义路由模块
import router from './router.js'
var vm = new Vue({
el: '#app',
data: {
},
render: c => c(app), //注意：render会把el指定容器全覆盖，el容器内部东西没作用（不写router-view等）
router //路由对象挂在到vue实例
});
网友评论