webpack中使用vue

webpack中使用vue1 安装依赖2 导入vue1 安装依赖npm i vue -D2 导入vuemain.js注意：在 webpack 中，使用 import Vue from ‘vue’ 导入的 Vue 构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供像网页中那样的使用方式；import Vue from 'vue'包的查找规则：找项目根目录中有没有 no

晶之佳缘

425人浏览 · 2021-04-03 18:33:29

晶之佳缘 · 2021-04-03 18:33:29 发布

1 vue组件

1.1 安装依赖

--安装vue
npm i vue -D
--安装解析vue的loader
npm i vue-loader -D
--vue-loader依赖vue-template-compile
npm i vue-template-compiler -D

在main.js中加入vue-loader，使得webpack可以正确解析.vue文件

module.exports = {
	module: {
       rules: [{ test: /\.vue$/, use: 'vue-loader' }]// 处理 .vue 文件的 loader
    }
}

1.2 新建组件

login.vue

<template>
  <div>
    <h1>登录组件</h1>
  </div>
</template>

<script>

</script>

<style>

</style>

1.3 导入vue和组件

1.3.1 导入vue

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

import Vue from 'vue'

通过包的查找规则我们可以找到相关的原因，包的查找规则

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

通过查找我们发现 vue对应package.json文件中"main"对应的是 "dist/vue.runtime.common.js"所以在 webpack 中，使用 import Vue from 'vue’导入的并不是我们在网页上常用的vue.js而是vue.runtime.common.js。

解决方案：

修改"main": "dist/vue.runtime.common.js"为"main": “dist/vue.js”
修改 import Vue from 'vue’为import Vue from ‘vue/dist/vue.js’
导入仍是import Vue from ‘vue’，但是需要在webpack.config.js中添加配置 resolve: { alias: { "vue$": "vue/dist/vue.js" } } 从而指定以vue结尾，导入的文件是哪一个

1.3.2 导入login组件

main.js

import login from './login.vue'

webpack.config.js
Vue Loader v15 现在需要配合一个 webpack 插件才能正确使用，所以我们需要添加vue-loader/lib/plugin插件配置：

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
	plugins: [new VueLoaderPlugin()]
}

1.3.3 创建vue对象

main.js

var vm = new Vue({
  el: '#app',
  render: function (createElements) { // 在 webpack 中，如果想要通过 vue， 把一个组件放到页面中去展示，vm 实例中的 render 函数可以实现
    return createElements(login)
  }
})

1.4 新建index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
<div id="app">
</div>
</body>
</html>

以上就是webpack适应vue组件的相关流程。

2 vue路由

2.1 项目目录

在这里插入图片描述

2.2 安装依赖

在第一章节中已经安装了vue、vue-loader和vue-template-compiler依赖，也搭建了相关的框架，所以vue路由只需要引入vue-router依赖即可

npm i vue-router -D

2.3 新建组件

Account.vue

<template>
  <div>
    <h1>Account 组件</h1>
  </div>
</template>

GoodsList.vue

<template>
  <div>
    <h1>GoodsList 组件</h1>
  </div>
</template>

app.vue

<template>
  <div>
    <h1>主页</h1>
    <router-link to="/account">Account</router-link>
    <router-link to="/goodslist">Goodslist</router-link>
    <router-view></router-view>
  </div>
</template>

2.4 编写main.js

main.js

import Vue from 'vue'
// 1. 导入 vue-router 包
import VueRouter from 'vue-router'
// 2. 手动安装 VueRouter
Vue.use(VueRouter)

// 导入 app 组件
import app from './App.vue'
// 导入 Account 组件
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'

// 3. 创建路由对象
var router = new VueRouter({
  routes: [
    // account  goodslist
    { path: '/account', component: account },
    { path: '/goodslist', component: goodslist }
  ]
})

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

2.5 编写index.html

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
<div id="app">
</div>
</body>
</html>

2.6 运行结果

在这里插入图片描述

2.7 嵌套路由

2.7.1 新建子组件

login.vue

<template>
  <div>
    <h1>登录组件</h1>
  </div>
</template>

register.vue

<template>
  <div>
    <h3>注册组件</h3>
  </div>
</template>

2.7.1 编写main.js

main.js

// 导入 Account 子组件
import login from './main/login.vue'
import register from './main/register.vue'

// 3. 创建路由对象
var router = new VueRouter({
  routes: [
    { path: '/account',
      name: 'account',
      children: [
        { path: 'login', component: login },
        { path: 'register', component: register }
      ]},
    { path: '/goodslist', component: goodslist }
  ]
})

2.7.2 局部样式

通过在style上加上scoped可以单独设置组件的局部样式，在login.vue添加以下配置后，只有login组件才会生效
login.vue

<style scoped>
 div{
   color: aqua;
 }
</style>

2.8 抽离路由

2.8.1 新建路由单独的JS

把路由相关代码抽离到router.js中，然后通过export default router把路由对象导出，这样可以大大简化入口mian.js的代码复杂程度。
router.js

// 1. 导入 vue-router 包
import VueRouter from 'vue-router'

// 导入 Account 组件
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'
// 导入 Account 子组件
import login from './main/login.vue'
import register from './main/register.vue'
// 3. 创建路由对象
var router = new VueRouter({
  routes: [
    { path: '/account',
      component: account,
      children: [
        { path: 'login', component: login },
        { path: 'register', component: register }
      ]
    },
    { path: '/goodslist', component: goodslist }
  ]
})

// 把路由对象暴露出去
export default router

2.8.2 浓缩main.js

通过import router from './router.js’引入router.js导出的对象进行使用。
main.js

import Vue from 'vue'
// 1. 导入 vue-router 包
import VueRouter from 'vue-router'
// 2. 手动安装 VueRouter
Vue.use(VueRouter)

// 导入 app 组件
import app from './App.vue'
import router from './router.js'

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

上一章：webpack5使用教程

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^