webpack结合vue使用

在webpack构建的项目中用vue进行开发

1. 安装vue

npm i vue –S

2. 在webpack中导入vue包

import Vue from 'vue'

3. import导入的vue包和script导入的包不一样，import导入的包功能不全，只提供了runtime-only的方式,所以直接使用会报错
4. 包的查找规则：
   • 查找根目录的node_modules文件夹
   • 在node_modules文件夹中根据包名找vue文件夹
   • 在vue文件夹中查找package.json包配置文件
   • 在package.json文件中查找main属性（main属性指定包在被加载的入口文件）
     
5. 导入完整的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完整包
        }
    }

---

组件

1. 创建一个.vue文件，作为组件的模板

2. 导入组件的方法，导入login组件

import login from './login.vue'

3. 但是webpack默认无法打包.vue 文件，需要安装相关的loader

npm i vue-loader vue-template-compiler –D

4. 在配置文件中，新增loader配置项，处理.vue 文件的loader

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

5. （这样使用后却报错了，查询后发现以上为旧版本用法，但是现版本的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)//以上代码可以简写

7. .vue 文件的script标签中有一个export default

8. 组件中的data必须是function

export default {
    name: "",
    data(){
        return{
            msg:'123'
        }
    },
}

---

export 暴露成员

1. 在ES6中使用export default和export向外暴露成员
   2.新建一个test.js 文件使用export default

export default {
    name:'zs',
    age:25
}

3. 引入test文件中export default的内容（s1为任意自定义变量名）

import s1 from './test'
console.log(s1)

4. 在一个 模块中export default只允许向外暴露一次，但是可以同时使用export

export var title='ha'

import s1,{title} from './test'
console.log(s1)
console.log(title)

5. export向外暴露成员只能用{}的形式接收，这种形式叫做按需导出，导出的成员必须严格按照导出的名称来使用{}来接收

---

结合webpack使用vue-router

1. 安装vue-router

npm install vue-router

2. 导入包，通过 Vue.use() 明确地安装路由功能

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

3. 使用路由，这个路由放到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}
    ]
})

4. 子路由的用法也基本与此相同

5. 使用scoped属性，使样式只会作用于本身，不会影响父元素的样式

6. 普通的style标签纸支持普通css样式，如果需要启用scss或less，需要为style设置lang属性（这个前提就是安装依赖，配置loader）

style scoped lang="scss">
body{
div{
    font-style: italic;
    color: aqua;
}
}

7. 抽离路由模块

• 在src新建router.js文件,把导入组件和创建组件的内容转移其上，在开头添加

import VueRouter from 'vue-router'

• 然后把路由对象暴露出去

export default router

• 最后在main中导入路由模块

import router from './router.js'

---