基于 Webpack+Vue+Vue-Router 搭建前端开发环境

发布于 2021-12-16 12:52:09 字数 6176 浏览 1288 评论 0

前端开发一步步发展催生了很多工具、组件、脚手架，好处是确实便利了项目的快速搭建，但是害处也很大：用惯了工具也许开发，也许两年过去了仍旧对基础原理仍旧一无所知。

比如，如何用原生dom来操作界面绑定事件都没学会，就开始用 Vue；再比如对 Webpack 的所解决的时间开发问题没有感知前就开始用 Vue-Cli 也是一样。

本篇尝试从最简单的例子开始，一步一步介绍如何基于 Webpack+Vue+Vue-Router 配置项目环境，并随着项目开发的深入介绍一些更进阶的配置。

1. 准备

基础的前端开发知识 HTML/JS/CSS 是必须的，然后应该能够基于 Webpack 的文档将 Concepts、Guide、Asset Management、Development 部分动手实践过。

2. 初始化

mkdir simplest-webpack-vue
cd simplest-webpack-vue
npm init -y
npm install -D webpack webpack-cli webpack-dev-server

此时的项目结构如下：

simplest-webpack-vue
  - dist
    - index.html
  - src
    - main.js
  - packge.json
  - webpack.config.js

webpack-config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/main.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: './dist'
  }
};

main.js

var ele = document.createElement('div');
ele.innerText = 'hello';
document.body.append(ele);

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>my project</title>
</head>
<body>
  <script src="./index.bundle.js"></script>
</body>
</html>

3. 集成 Vue

我们参考 vue-loader 先安装 vue vue-loader vue-template-compiler。然后在 webpack.config.js 中配置 vue-loader。

因为 webpack 加载非JS的文件会按照配置的 rules 依次进行处理，而在标准的vue文件中，除了 template 包裹的 html 内容意外，还会有 <style> 包裹的css 和 <script> 包裹的JS，因此还需要提供 css-loader+style-loader 用于处理样式，babel-loader 用于处理JS。

npm install -P vue
npm install -D @babel/core @babel/preset-env vue-loader vue-template-compiler babel-loader css-loader  vue-style-loader css-loader

webpack.config.js 增加的部分如下


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

module.exports = {

  plugins: [
    new VueLoaderPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
    ]
  }
};

关于 babel 需要特别注意的一点是，从版本7开始，balbel 包名规则从 babel-core 变成了 @babel/core，如果发现 babel-loader 报出了依赖的 babel-core 未找到的错误，我们需要制定 babel-loader 安装最新的版本即可。

此时的项目结构如下

simplest-webpack-vue
  - dist
    - index.html
  - src
    - App.vue
    - main.js
  - packge.json
  - webpack.config.js

dist/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>my project</title>
</head>
<body id="app">
  <script src="./index.bundle.js"></script>
</body>
</html>

src/App.vue

<style>
  .app {color: red}
</style>

<template>
  <div class="app">{{msg}}</div>
</template>
<script>
export default {
  data() {
    return {msg}
  }
}
</script>
`

src/main.js

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App),
}).$mount('#app');

执行 npm run start 可以看到 HTML 渲染了来自JS的变量并且颜色被应用成了 CSS 红色。

3. 集成 Vue-Router

首先安装 vue-router

npm install -D vue-router

继续修改和新增必要的文件，文件夹结构图如下所示：

simplest-webpack-vue
  - dist
    - index.html
  - src
    - components
      - Home.vue
      - Products.vue
    - js
      - common
        - router-config.js
    - App.vue
    - main.js
  - packge.json
  - webpack.config.js

webpack.config.js

module.exports = {

  resolve: {
    alias: {
      cp: path.resolve(__dirname, 'src/components/'),
      js: path.resolve(__dirname, 'src/js/'),
      css: path.resolve(__dirname, 'src/css/')
    }
  },

}

src/main.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import RouterConfig from 'js/common/router-config.js';

import App from './App.vue';

Vue.use(VueRouter)

new Vue({
  render: h => h(App),
  router: new VueRouter(RouterConfig)
}).$mount('#app');

js/common/router-config.js

import Home from "cp/Home.vue";
import Products from "cp/Products.vue";

export default {
  routes: [{
    name: 'home', path: '/', component: Home
  },{
    name: 'products', path: '/products', component: Products
  }]
}

src/App.vue

<template>
  <div id="app"><router-view></router-view></div>
</template>

src/components/Home.vue

<template>
  <div class="home-page">
    home page
  </div>
</template>

src/components/Products.vue

<template>
  <div class="products-page">
    products
  </div>
</template>

执行 npm npm run start 可以通过切换 / 和 /products 来看到不同的内容被渲染成功。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

关于作者

梦中楼上月下

暂无简介

0 文章

0 评论

612 人气

关注发私信

友情链接

文江博客

基于 Webpack+Vue+Vue-Router 搭建前端开发环境

1. 准备

2. 初始化

3. 集成 Vue

3. 集成 Vue-Router

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

你可能也喜欢

创建 Docker Swarm 集群

重建 CentOS 或 RHEL 上被损坏的 RPM 数据库

修复 passwd:Authentication token manipulation error 的步骤

Android 的系统架构

Textillate.js 动感十足的 CSS3 文本动画插件

Webpack 入门实践

查看 Linux 内核路由表以及 route 命令的使用

Linux 中 route 命令使用和介绍

发布评论

关于作者

热门标签

推荐作者

qq_Yqvrrd

2503248646

浮生未歇

养猫人

第七度阳光i

新雨望断虹

友情链接

基于 Webpack+Vue+Vue-Router 搭建前端开发环境

1. 准备

2. 初始化

3. 集成 Vue

3. 集成 Vue-Router

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

你可能也喜欢

发布评论

关于作者

热门标签

推荐作者

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。