webpack中使用vue、component、vue-router

最新推荐文章于 2023-12-14 08:00:00 发布

原创最新推荐文章于 2023-12-14 08:00:00 发布 · 549 阅读

0 ·

CC 4.0 BY-SA版权

webpack 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何在Webpack项目中使用Vue和组件，以及配置Vue-Router。首先，在普通网页中引入Vue是通过script标签，而在Webpack中需要安装Vue包并配置vue-loader。接着，讲解了Webpack中如何定义和使用.vue组件，以及通过render函数将组件渲染到页面。此外，还阐述了在Webpack项目中设置Vue-Router的步骤，包括安装VueRouter、创建VueRouter实例以及挂载到Vue实例上。最后，提到了在组件中写样式的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、webpack中使用vue和组件

在普通网页中使用vue：

使用script标签，引入vue的包
在index页面，创建一个id为app的div容器
创建一个vue实例

在webpack中使用vue

安装vue包

npm i vue -S

引入vue包

import Vue form "vue"

注意：在 webpack 中，使用 import Vue from 'vue' 导入的 Vue 构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供像网页中那样的使用方式

//以下路径导入的是功能完整的vue
import Vue from '../node_modules/vue/dist/vue.js'

//或者在配置文件中配置以下代码
resolve:{
        alias:{
             "vue$":'vue/dist/vue.js'
        }
    }

包的查找规则：

找项目根目录中有没有 node_modules 的文件夹
在 node_modules 中根据包名，找对应的 vue 文件夹
在 vue 文件夹中，找一个叫做 package.json 的包配置文件
在 package.json 文件中，查找一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】

由于在 webpack 中，推荐使用 .vue 这个组件模板文件定义组件，所以需要安装能解析这种文件的 loader

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

在webpack.config.js配置文件中，配置vue-loader的 plugin，并且新增loader的配置项

//配置vue-loader的插件
const VueLoaderPlugin = require('./node_modules/vue-loader/lib/plugin.js');
plugins:[
       	 	new VueLoaderPlugin({})
	     ]
	     
//配置所有第三方loader模块的
module:{
        rules:[
            { test:/\.vue$/,use:"vue-loader"}
        ]
    }

定义一个 .vue 的组件，其中，组件有三部分组成： template 、script 和style
使用 import login from './login.vue' 导入这个组件
创建vue实例new Vue({el:"#app",render:c => c(login)})

在 webpack 中，如果想要通过 vue，把一个组件放到页面中去展示，vm 实例中的 render 函数可以实现。

var vm = new Vue({
     el: '#app',
     data: {},
     methods: {},
     render: function (createElements) { // createElements 是一个 方法，调用它能够把 指定的 组件模板，渲染为 html 结构
       return createElements(login)
       // 注意：这里 return 的结果，会 替换页面中 el 指定的那个 容器
     }
  });

在页面中创建id为app的div元素，作为vue实例要控制的区域

二、webpack中使用vue-router

第一步，装包

npm i vue-router -S

导入 vue-router 包

import VueRouter from 'vue-router'

手动安装 VueRouter

 Vue.use(VueRouter)

创建VueRouter对象

var router = new VueRouter({
  routes: [
    { path: '/account', component: account },
    { path: '/goodslist', component: goodslist }
  ]
})

把router挂载到vm实例上

var vm = new Vue({
  el: '#app',
  render: c => c(app), 
  router 
})

给组件写样式

<style lang="scss" scoped>
//style 标签只支持普通的样式，如果想要启用 scss 或 less ，需要为 style 元素设置 lang 属性 
// 只要 style 标签， 是在 .vue 组件中定义的，那么，推荐都为 style 开启 scoped 属性
body {
  div {
    font-style: italic;
  }
}
</style>

补充

Node中向外暴露成员的形式

module.exports = {}
//或者
exports

使用 var 名称 = require(‘模块标识符’) 导入成员

ES6中使用export default和export向外暴露成员

//test.js

//export default的第一种写法
var info = {
  name: 'Alice',
  age: 18
}
export default info


//export default的第二种写法
export default {
 	name: 'Alice',
  	age: 18
}

export var title = '小星星'
export var content = '亮晶晶'

//main.js

import info,{title as tit,content} from './test.js'
console.log(info);
console.log(tit);
console.log(content);

注意：

在一个模块中，可以同时使用 export default 和 export 向外暴露成员
export default 向外暴露的成员，可以使用任意的变量来接收
在一个模块中，export default 只允许向外暴露1次
export 可以向外暴露多个成员，同时如果某些成员，我们在 import 的时候不需要，则可以不在 {} 中定义
使用 export 向外暴露的成员，必须严格按照导出时候的名称，来使用 {} 按需接收，这种形式叫做【按需导出】；
使用 export 导出的成员，如果想换个名称来接收，可以使用 as 来起别名；