在webpack构建的项目中用vue进行开发
- 安装vue
npm i vue –S
- 在webpack中导入vue包
import Vue from 'vue'
- import导入的vue包和script导入的包不一样，import导入的包功能不全，只提供了runtime-only的方式,所以直接使用会报错
- 包的查找规则：
- 查找根目录的node_modules文件夹
- 在node_modules文件夹中根据包名找vue文件夹
- 在vue文件夹中查找package.json包配置文件
- 在package.json文件中查找main属性（main属性指定包在被加载的入口文件）
- 导入完整的vue文件
- 修改package.json文件中main属性，让它指向vue.js
- 更改import，直接指向vue.js
- 不修改import，但是修改webpack.config.js配置文件，（resolve与module同级）修改vue的导入路径
import Vue from '../node_modules/vue/dist/vue'//更改import，直接指向vue.js
resolve: {
alias:{
'vue$':'vue/dist/vue.js'//导入vue完整包
}
}
组件
- 创建一个.vue文件，作为组件的模板
<template>
<div>用.vue构建出来的组件</div>
</template>
<script>
export default {
name: ""
}
</script>
<style scoped>
</style>
- 导入组件的方法，导入login组件
import login from './login.vue'
- 但是webpack默认无法打包.vue 文件，需要安装相关的loader
npm i vue-loader vue-template-compiler –D
- 在配置文件中，新增loader配置项，处理.vue 文件的loader
{test:/\.vue$/,use:'vue-loader'}
- （这样使用后却报错了，查询后发现以上为旧版本用法，但是现版本的vue-loader是v15）
- 在package.config.js中加入以下代码，在开头
const VueLoaderPlugin=require('vue-loader/lib/plugin')
- 在plugin中加入
new VueLoaderPlugin()
6.在webpack中如果想要通过vue把一个组件放入页面中去VM实例中的render可以实现
render:function (createElements) {
return createElements(login)
}
render:c=>c(login)//以上代码可以简写
- .vue 文件的script标签中有一个export default
<script>
export default {
name: "",
}
</script>
- 组件中的data必须是function
export default {
name: "",
data(){
return{
msg:'123'
}
},
}
export 暴露成员
- 在ES6中使用export default和export向外暴露成员
2.新建一个test.js 文件使用export default
export default {
name:'zs',
age:25
}
- 引入test文件中export default的内容（s1为任意自定义变量名）
import s1 from './test'
console.log(s1)
- 在一个 模块中export default只允许向外暴露一次，但是可以同时使用export
export var title='ha'
import s1,{title} from './test'
console.log(s1)
console.log(title)
- export向外暴露成员只能用{}的形式接收，这种形式叫做按需导出，导出的成员必须严格按照导出的名称来使用{}来接收
结合webpack使用vue-router
- 安装vue-router
npm install vue-router
- 导入包，通过 Vue.use() 明确地安装路由功能
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
- 使用路由，这个路由放到render控制的那个组件中
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'
var router=new VueRouter({
routes:[
{path:'/account',component:account},
{path:'/goodslist',component:goodslist}
]
})
<template>
<div>
<h1>用.vue构建出来的组件</h1>
<router-link to="/account">Account</router-link>
<router-link to="/goodslist">GoodsList</router-link>
<router-view></router-view>
</div>
</template>
- 子路由的用法也基本与此相同
<template>
<div>
<h1>Account组件</h1>
<router-link to="/account/login">login</router-link>
<router-link to="/account/register">register</router-link>
<router-view></router-view>
</div>
</template>
- 使用scoped属性，使样式只会作用于本身，不会影响父元素的样式
<style scoped>
div{
color: aqua;
}
</style>
- 普通的style标签纸支持普通css样式，如果需要启用scss或less，需要为style设置lang属性（这个前提就是安装依赖，配置loader）
style scoped lang="scss">
body{
div{
font-style: italic;
color: aqua;
}
}
</style>
- 抽离路由模块
- 在src新建router.js文件,把导入组件和创建组件的内容转移其上，在开头添加
import VueRouter from 'vue-router'
- 然后把路由对象暴露出去
export default router
- 最后在main中导入路由模块
import router from './router.js'
