项目开发配置

目录结构

node_modules

项目依赖文件夹

public

静态资源（图片），放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件夹

src

源代码文件夹

assets：静态资源（一般放置多个组件共用的静态资源），放置在assets文件夹里面的静态资源，在webpack打包时，webpack会把静态资源当作一个模块，打包js文件夹里面
components：一般放置的非路由组件（全局组件）
pages | views: 放置路由组件
App.vue：唯一的根组件

main.js：程序的入口文件，也是整个程序当中最先执行的文件

import Vue from 'vue'    /*引入vue框架*/
import ElementUI from 'element-ui'     /*引入element-ui样式*/
import App from './App'     /*引入根组件*/
import router from './router'    /*引入路由设置*/

Vue.config.productionTip = false    /*关闭生产模式下给出的提示*/

 /*定义一个新实例*/
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }     /*此处为引入的根组件的App.vue*/
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

babel.comfig.js：配置文件（babel相关）
package.json：认为项目‘身份证’；记录项目名称，依赖，如何运行。
package-lock.json：缓存性文件

router

index.js

import Vue from 'vue'    /*引入vue框架*/
import Router from 'vue-router'   /*引入路由依赖*/
import Hello from ‘@、components/Hello’    /*引入页面组件，命名为Hello*/

Vue.use(Router)   /*使用路由依赖*/

   /*定义路由*/
export default new Router({
  router:[
   {
       path: '/ ',
       name: 'Hello',
       component: Hello
    }
 ]
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

路由组件与非路由组件

路由组件一般放置在pages | views 文件夹，非路由组件一般放置在components文件夹

路由组件一般需要在router文件夹中进行注册（使用的即为组件的名字），非路由组件在使用的时候，一般都是以标签形式使用(Header Footer未注册，以标签形式直接使用)

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

<script>
// let a;
import Header from "./components/Header";
import Footer from "./components/Footer";
export default {
  name: "App",
  components: {
    Header,
    Footer,
  },
};
</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

template 其中模板只能包含一个父节点，也就是说顶层的div只能有一个（例如上图，父节点为#app的div，其没有兄弟节点）

是子路由视图，后面的路由页面都显示在此处

打一个比喻吧，类似于一个插槽，跳转某个路由时，该路由下的页面就插在这个插槽中渲染显示
【script】

vue通常用es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等。

【style】

样式通过style标签如要引入外部css文件，需给项目安装css-loader依赖包
注册完路由，路由组件和非路由组件都有 $route $router 属性
- $route：一般获取路由信息【路径，query，params】
- $router: 一般进行编程式导航实现路由跳转【push | replace】
路由跳转两种方式
- 声明式导航 router-link:
- 编程式导航 push | replace
- 声明式的功能，编程式均能做；编程式还可以做一些业务逻辑
模块开发
- 静态页面 + 静态组件拆分出来
- 发送请求（API）
- Vuex(三联环 action mutation state)
- 组建获取仓库数据动态展示数据

原理分析

jsconfig.json

使用原因

Visual Studio Code的JavaScript支持两种不同模式运行：

File Scope : 没有jsconfig.json。在这种模式下，在Visual Studio Code中打开的JavaScript文件被视为独立的单元。只要文件a.js没有显式引用b.ts（即使用import或CommonJS 模块），两个文件之间就不会存在公共项目上下文。
Explicit Project - 有jsconfig.json。通过jsconfig.json文件定义一个**JavaScript项目**。目录中存在此文件表示该目录是JavaScript项目的根目录。文件本身可以选择列出属于项目的文件，要从项目中排除的文件以及编译器选项。

用途

指定根目录、配置属于项目的文件、要从项目中排除的文件、编译器选项等JavaScript服务提供的功能选项。

参数说明

exclude 属性(glob 模式)，约定哪些文件不是源代码的一部分，可以提升性能。如果工作区中没有 jsconfig.json，VS Code 将默认排除 node_modules 文件夹
可以使用 include 属性(glob 模式)显式地设置项目中的文件。如果没有 include 属性，则默认情况下包含包含目录和子目录中的所有文件。如果指定了 include 属性，则只包含这些文件。
compilerOptions可以配置默认根路径以及别名，配置以后可以通过该根路径快速访问到子路径。可配置的选项如下表所示：

// jsconfig.json  常用样例
{
  "compilerOptions": {
    "baseUrl": "./",    
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

1
2
3
4
5
6
7
8
9
10

注意：tsconfig.json 配置优先级高于 jsconfig.json，它是TypeScript的配置文件。配置了tsconfig.json的情况下需要配置 allowJs:true 之后 jsconfig.json 才会生效。

vue.config.js

是vue-cli3中的配置文件

vue-cli 3 与 2 版本有很大区别

vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下
vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构，3 的设计更加抽象和简洁
vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
vue-cli 3 的设计原则是“0配置”
vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化

作用

由于 vue-cli 3 也学习了 rollup 的零配置思路，所以项目初始化后，没有了以前熟悉的 build 目录，也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件。这是因为 vue-cli 3 在项目初始化时便帮开发者完成了绝大部分情形下的 webpack 配置。该功能是由 @vue/cli-service 依赖实现的，打开 node_modules 目录下 @vue 中的 cli-service 便可发现对应的配置文件。

但是开发者在实际开发过程中还有需要自己去修改配置的地方，这时就需要在项目根目录下手动新建一个 vue.config.js。

常见用途：

配置根路径（地址栏）publicPath
指定构建输出目录（打包位置）outputDir
指定静态资源目录：assetsDir
关闭eslint校验 lintOnSave
配置代理

实例

module.exports ={
	devServer:{
		port:8080,
		host:'localhost',
		open:true,//配置浏览器自动访问
	}
}

1
2
3
4
5
6
7

module.exports = {   
  publicPath: '/',
  lintOnSave:false,  // 关闭eslint检查
  devServer: {   // 代理跨域
      proxy: {       
        '/api': {  // 如果请求前缀是 /api 就触发代理进行工作
          target: 'http://39.98.123.211',
          // pathRewrite: { '^/api': '' },
        },
      },
    },
}

1
2
3
4
5
6
7
8
9
10
11
12

module.exports = {
  // 部署应用时的基本 URL
  publicPath: process.env.NODE_ENV === 'production' ? '192.168.60.110:8080' : '192.168.60.110:8080',

  // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为
  outputDir: 'dist',

  // build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  assetsDir: '',

  // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
  indexPath: 'index.html',

  // 默认在生成的静态资源文件名中包含hash以控制缓存
  filenameHashing: true,

  // 构建多页面应用，页面的配置
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: 'src/subpage/main.js'
  },

  // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码 (在生产构建时禁用 eslint-loader)
  lintOnSave: process.env.NODE_ENV !== 'production',

  // 是否使用包含运行时编译器的 Vue 构建版本
  runtimeCompiler: false,

  // Babel 显式转译列表
  transpileDependencies: [],

  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
  productionSourceMap: true,

  // 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性（注：仅影响构建时注入的标签）
  crossorigin: '',

  // 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)
  integrity: false,

  // 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中
  // 如果你需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内，你可以直接修改配置，或者返回一个将会被合并的对象
  configureWebpack: {},

  // 对内部的 webpack 配置（比如修改、增加Loader选项）(链式操作)
  chainWebpack: () =>{

  },

  // css的处理
  css: {
    // 当为true时，css文件名可省略 module 默认为 false
    modules: true,
    // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS
    // 默认生产环境下是 true，开发环境下是 false
    extract: false,
    // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
    sourceMap: false,
    //向 CSS 相关的 loader 传递选项(支持 css-loader postcss-loader sass-loader less-loader stylus-loader)
    loaderOptions: {
      css: {},
      less: {}
    }
  },

  // 所有 webpack-dev-server 的选项都支持
  devServer: {},

  // 是否为 Babel 或 TypeScript 使用 thread-loader
  parallel: require('os').cpus().length > 1,

  // 向 PWA 插件传递选项
  pwa: {},

  // 可以用来传递任何第三方插件选项
  pluginOptions: {}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

vue.config.js 的完整配置

介绍

之前，我有提到过，当然大家肯定也都知道，Vue3.0不在有webpack.config.js的配置；但是不可避免,在项目开发中我们肯定会存在一些特殊的需求需要调整webpack, 这个时候，在Vue3.0的项目当中，我们就需要在根目录创建vue.config.js去完成webpack的一些特殊配置,默认它会被 @vue/cli-service 自动加载。

此刻，你需要创建vue.config.js文件。

查看默认的webpack配置

Vue CLI 官方文档：vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。那个全局的 vue 可执行程序同样提供了 inspect 命令，这个命令只是简单的把 vue-cli-service inspect 代理到了你的项目中。

被抽象化的webpack，我们要想去理解它默认的一些配置的话是比较困难的，所以我们可以通过指令去查看。该指令会将webpack的配置输出到output.js文件，这样方便去查看。

vue inspect > output.js

vue.config.js文件

这个文件导出了一个包含了选项的对象：

module.exports = {
// 选项...
}

1
2
3

接下来，详细介绍一些选项及配置：

基本配置

module.exports = {
    productionSourceMap: false,
    publicPath: './',
    outputDir: 'dist',
    assetsDir: 'assets',
    devServer: {
        port: 8090,
        host: '0.0.0.0',
        https: false,
        open: true
    },
// 其他配置
    ...

1
2
3
4
5
6
7
8
9
10
11
12
13

productionSourceMap：生产环境是否要生成 sourceMap
publicPath：部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致
- 可以通过三元运算去配置dev和prod环境, publicPath: process.env.NODE_ENV === 'production' ? '/prod/' : './'
outputDir: build 时输出的文件目录
assetsDir: 放置静态文件夹目录
devServer: dev环境下，webpack-dev-server 相关配置
- port: 开发运行时的端口
- host: 开发运行时域名，设置成'0.0.0.0',在同一个局域网下，如果你的项目在运行，同时可以通过你的http://ip:port/...访问你的项目
- https: 是否启用 https
- open: npm run serve 时是否直接打开浏览器

插件及规则的配置

在vue.config.js如果要新增/修改 webpack 的 plugins 或者 rules , 有2种方式。

`configureWebpack` 方式

configureWebpack 是相对比较简单的一种方式

它可以是一个对象：和 webpack 本身配置方式是一致，该对象将会被 webpack-merge 合并入最终的 webpack 配置
它也可以是一个函数：直接在函数内部进行修改配置

configureWebpack: {
    rules:[],
    plugins: []
  }
configureWebpack: (config) => {
// 例如，通过判断运行环境，设置mode
    config.mode = 'production'
}

1
2
3
4
5
6
7
8

`chainWebpack` 方式

chainWebpack 链式操作 (高级)，接下来所有的配置我都会在该选项中进行配置

规则rules的配置

关于rules 的配置，我会分别从新增/修改进行介绍。

rules的新增

在webpack中 rules 是 module 的配置项，而所有的配置的都是挂载到 config 下的，所以新增一个rule方式：

config.module
  .rule(name)
    .use(name)
      .loader(loader)
      .options(options)

1
2
3
4
5

案例：style-resources-loader 来添加less全局变量

案例：svg-sprite-loader 将svg图片以雪碧图的方式在项目中加载

module.exports = {
    chainWebpack: (config) => {
// 通过 style-resources-loader 来添加less全局变量const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
        types.forEach(type => {
let rule = config.module.rule('less').oneOf(type)
            rule.use('style-resource')
                .loader('style-resources-loader')
                .options({
                    patterns: [path.resolve(__dirname, './lessVariates.less')]
                });
        });

// `svg-sprite-loader`: 将svg图片以雪碧图的方式在项目中加载
        config.module
            .rule('svg')
            .test(/\.svg$/)// 匹配svg文件
            .include.add(resolve('src/svg'))// 主要匹配src/svg
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')// 使用的loader，主要要npm该插件
            .options({symbolId: 'svg-[name]'})// 参数配置
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

rules的修改

针对已经存在的 rule , 如果需要修改它的参数, 可以使用 tap 方法：

config.module
  .rule(name)
    .use(name)
      .tap(options => newOptions)

1
2
3
4
5

案例：修改url-loader的参数

module.exports = {
    chainWebpack: (config) => {
// `url-loader`是webpack默认已经配置的，现在我们来修改它的参数
        config.module.rule('images')
            .use('url-loader')
            .tap(options => ({
                name: './assets/images/[name].[ext]',
                quality: 85,
                limit: 0,
                esModule: false,
            }))
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

插件plugins 的配置

关于 plugins 的配置，我会分别从新增/修改/删除进行介绍。

plugins的新增

注意：这里WebpackPlugin不需要通过new WebpackPlugin()使用。

config
  .plugin(name)
  .use(WebpackPlugin, args)

1
2
3

案例：新增hot-hash-webpack-plugin

constHotHashWebpackPlugin = require('hot-hash-webpack-plugin');
module.exports = {
    chainWebpack: (config) => {
// 新增一个`hot-hash-webpack-plugin`// 注意：这里use的时候不需要使用`new HotHashWebpackPlugin()`
        config.plugin('hotHash')
              .use(HotHashWebpackPlugin, [{ version: '1.0.0' }]);
    }
}

1
2
3
4
5
6
7
8

plugins的修改

同理, plugin 参数的修改也是通过 tap 去修改。

config
    .plugin(name)
    .tap(args => newArgs)

1
2
3

案例：修改打包后css抽离后的filename及抽离所属目录

案例：删除console和debugger

constHotHashWebpackPlugin = require('hot-hash-webpack-plugin');
module.exports = {
    chainWebpack: (config) => {
// 修改打包时css抽离后的filename及抽离所属目录
        config.plugin('extract-css')
                .tap(args => [{
                    filename: 'css/[name].[contenthash:8].css',
                    chunkFilename: 'css/[name].[contenthash:8].css'
                }]);

// 正式环境下，删除console和debugger
        config.optimization
                .minimize(true)
                .minimizer('terser')
                .tap(args => {
let { terserOptions } = args[0];
                    terserOptions.compress.drop_console = true;
                    terserOptions.compress.drop_debugger = true;
return args
                });
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

plugins的删除

对于一些webpack默认的 plugin ，如果不需要可以进行删除

config.plugins.delete(name)

案例：删除 vue-cli3.X 模块的自动分割抽离

module.exports = {
    chainWebpack: (config) => {
// vue-cli3.X 会自动进行模块分割抽离，如果不需要进行分割,可以手动删除
        config.optimization.delete('splitChunks');

    }
}

1
2
3
4
5
6
7
8

一些常见的配置

修改enter文件

webpack 默认的 entry 入口是 scr/main.ts

config.entryPoints.clear();// 清空默认入口
config.entry('test').add(getPath('./test/main.ts'));// 重新设置复制代码

1
2

DefinePlugin

定义全局全局变量，DefinePlugin 是 webpack 已经默认配置的，我们可以对参数进行修改

config.plugin('define').tap(args => [{
    ...args,
    "window.isDefine":JSON.stringify(true),
    }]);

1
2
3
4

自定义filename 及 chunkFilename

自定义打包后js文件的路径及文件名字

config.output.filename('./js/[name].[chunkhash:8].js');
config.output.chunkFilename('./js/[name].[chunkhash:8].js');

1
2

修改html-webpack-plugin参数

html-webpack-plugin 是 webpack 已经默认配置的，默认的源模版文件是 public/index.html ;我们可以对其参数进行修改

 config.plugin('html')
        .tap(options => [{
            template: '../../index.html'// 修改源模版文件title: 'test',
        }]);

1
2
3
4

设置别名alias

webpack默认是将src的别名设置为@, 此外，我们可以进行添加

config.resolve.alias
        .set('@',resolve('src'))
        .set('api',resolve('src/apis'))
        .set('common',resolve('src/common'))

1
2
3
4

附上一份我的vue.config.js的配置

const path = require('path');
constHotHashWebpackPlugin = require('hot-hash-webpack-plugin');
constWebpackBar = require('webpackbar');
constresolve = (dir) => path.join(__dirname, '.', dir);

module.exports = {
    productionSourceMap: false,
    publicPath: './',
    outputDir: 'dist',
    assetsDir: 'assets',
    devServer: {
        port: 9999,
        host: '0.0.0.0',
        https: false,
        open: true
    },

    chainWebpack: (config) => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
        types.forEach(type => {
let rule = config.module.rule('less').oneOf(type)
            rule.use('style-resource')
                .loader('style-resources-loader')
                .options({
                    patterns: [path.resolve(__dirname, './lessVariates.less')]
                });
        });

        config.resolve.alias
            .set('@',resolve('src'))
            .set('api',resolve('src/apis'))
            .set('common',resolve('src/common'))

        config.module.rule('images').use('url-loader')
            .tap(options => ({
                name: './assets/images/[name].[ext]',
                quality: 85,
                limit: 0,
                esModule: false,
            }));

        config.module.rule('svg')
            .test(/\.svg$/)
            .include.add(resolve('src/svg'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader');

        config.plugin('define').tap(args => [{
            ...args,
            "window.isDefine":JSON.stringify(true)
        }]);

// 生产环境配置if (process.env.NODE_ENV === 'production') {
            config.output.filename('./js/[name].[chunkhash:8].js');
            config.output.chunkFilename('./js/[name].[chunkhash:8].js');
            config.plugin('extract-css').tap(args => [{
                filename: 'css/[name].[contenthash:8].css',
                chunkFilename: 'css/[name].[contenthash:8].css'
            }]);
            config.plugin('hotHash').use(HotHashWebpackPlugin, [{ version : '1.0.0'}]);
            config.plugin('webpackBar').use(WebpackBar);

            config.optimization.minimize(true)
                .minimizer('terser')
                .tap(args => {
let { terserOptions } = args[0];
                    terserOptions.compress.drop_console = true;
                    terserOptions.compress.drop_debugger = true;
return args
                });
            config.optimization.splitChunks({
                cacheGroups: {
                    common: {
                        name: 'common',
                        chunks: 'all',
                        minSize: 1,
                        minChunks: 2,
                        priority: 1
                    },
                    vendor: {
                        name: 'chunk-libs',
                        chunks: 'all',
                        test: /[\\/]node_modules[\\/]/,
                        priority: 10
                    }
                }
            });
        }
    }
};

安装、构建、运行

安装Node.js（下载、安装，node -v 以及npm -v验证）

国内使用npm较慢，安装国内镜像工具cnpm

npm install -g cnpm --registry=http://registry.npm.taobao.org
# 之后就可以用cnpm代替npm来安装依赖包了

1
2

安装vue-cli脚手架
```
cnpm install -g vue-cli
```
1

通过vue-cli脚手架构建前端项目。

// 3.x版本
**vue create projectName**

// 2.X版本是
vue init webpack projectName

// 方式3
vue ui

1
2
3
4
5
6
7
8

vue create 和 vue init webpack

在项目目录下下载依赖包
```
cnpm install
```
1

运行项目

npm run serve

// 2.x版本是
npm run dev

1
2
3
4

初始项目目录结构

Untitled

定义全局axios拦截器

安装axios

npm install axios@0.21.1 --save

定义axios的拦截

import axios from "axios";
import router from "./router";
import Element from "element-ui"

axios.defaults.baseURL = "http://localhost:8081"

const request = axios.create({
	timeout: 5000,
	headers: {
		'Content-Type': "application/json; charset=utf-8"
	}
})

request.interceptors.request.use(config => {
	config.headers['Authorization'] = localStorage.getItem("token") // 请求头带上token
	return config
})

request.interceptors.response.use(
	response => {

		console.log("response ->" + response)

		let res = response.data

		if (res.code === 200) {
			return response
		} else {
			Element.Message.error(!res.msg ? '系统异常' : res.msg)
			return Promise.reject(response.data.msg)
		}
	},
	error => {

		console.log(error)

		if (error.response.data) {
			error.massage = error.response.data.msg
		}

		if (error.response.status === 401) {
			router.push("/login")
		}

		Element.Message.error(error.massage, {duration: 3000})
		return Promise.reject(error)
	}
)

export default request

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

main.js导入axios.js

import request from "./axios";
Vue.prototype.$axios = request

1
2

根组件（App.vue）

App.vue 可以当做是网站首页，是一个 vue 项目的主组件，页面入口文件，所有页面都是在 App.vue 下进行切换的。

app.vue作为主组件在main.js中被使用

// 引入依赖
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App)  // 创建应用实例，配置根组件
app.mount("#app");  // 挂载至app元素

1
2
3
4
5
6

主组件app.vue调用其他组件

<template>
  <div id="app">
 <router-view/>   // 与 url 对应的组件将替换这里的<router-view/>
 </div>
</template>

<script>
export default {
  // 根组件
  name: 'APP'
}
</script>

<style lang="less">

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

项目（请求/地址）根路径配置

往后端发送请求时的路径

对axios配置baseURL

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  // withCredentials: true,  // 跨域请求时发送cookie
  timeout: 5000
})

1
2
3
4
5
6
7

地址栏的公共前缀。

例如下图中的app就是统一配置的

Untitled

对脚手架进行设置：例如在 vue.config.js 中配置 publicPath :

module.exports ={
    publicPath: "/前缀" ,
    // ……
}

1
2
3
4

router.js里：

// VueRouter3  src/router/index.js
export default new Router({ 
	base: "/前缀" , 
})

// Router4中貌似没找到对应的配置

1
2
3
4
5
6

修改端口号

Vue3 中修改端口号

package.json中修改script

"scripts": {
    "serve": "vue-cli-service serve --port 80",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
},

1
2
3
4
5

运行项目时追加
```
npm run serve --port 80
```
1

vue.config.js中配置

module.exports = {
    devServer:{
        port:80, // 启动端口号
        open:true  // 启动后是否自动打开网页
    }
}

1
2
3
4
5
6

引入less

在项目中安装less与less-loader

cnpm install --save-dev less@4 less-loader@7

经测试，安装完毕后不需要再在main.js中引用注册

// 下面的不是必须的
import less from 'less'
Vue.use(less)

1
2
3

问题：

直接安装的话二者的版本不匹配，会报错，需要将less-loader的版本下降。如

less:4 与 less-loader:7 是可以的

less:4 与 less-loader:10 会报错

安装错了的话先移除less-loader再安装新的

cnpm remove less-loader  // 此时package.json中的对应依赖也会自动删除
cnpm install --save-dev less-loader@7

1
2

引入依赖、创建应用实例、挂载根组件（main.js）

在项目 src/main.js 中引入依赖并创建实例，每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始的。 createApp 是 vue3 新增的一个全局 API。该应用实例用来在应用中注册“全局”组件。

传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。一个应用需要被挂载到一个 DOM 元素中。例如，如果你想把一个 Vue 应用挂载到 <div id="app"></div>，应该传入 #app

main.js-Vue3版

// 引入依赖
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)  // 创建应用实例，配置根组件
app.use(ElementUI)
app.use(store).use(router)  // 应用实例暴露的大多数方法都会返回该同一实例，允许链式
app.mount("#app");  // 挂载至DOM元素，也就是项目的根元素

// 与大多数应用方法不同的是，mount 不返回应用本身。相反，它返回的是**根组件实例**。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

main.js-Vue2版

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Vue.config.productionTip = false

new Vue({   // 新建全局对象
router,
store,
render:h => h(App)
}).$mount('#app')

// 或者
new Vue({
router: router, //路由
store: store, //store 是vuex的实例化对象
render:h => h(App) //一个方法
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

**关于 $m o u n t () * * ： V u e 构造对象时，需要配置一个 e l 属性，如果没有没有 e l 属性时，可以使用 ‘ .$ mount(‘#app’)`进行挂载。相当于

new Vue({
 el: '#app',
 router,
 render: h => h(App)
 });

//也可以先得到Virtual DOM，再挂载
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

1
2
3
4
5
6
7
8
9

关于 render：一种渲染函数，它比模板更接近编译器，render 函数的优先级高于根据 template 选项或挂载元素的 DOM 内 HTML 模板编译的渲染函数。

Reference

上次更新: 2025/02/26, 08:57:57

← 功能样式样式绑定→

项目开发配置

项目开发配置

目录结构

node_modules

public

src

router

原理分析

jsconfig.json

使用原因

用途

参数说明

vue.config.js

vue-cli 3 与 2 版本有很大区别

作用

实例

vue.config.js 的完整配置

介绍

查看默认的webpack配置

vue.config.js文件

基本配置

插件及规则的配置

configureWebpack 方式

chainWebpack 方式

规则rules的配置

rules的新增

rules的修改

插件plugins 的配置

plugins的新增

plugins的修改

plugins的删除

一些常见的配置

修改enter文件

DefinePlugin

自定义filename 及 chunkFilename

修改html-webpack-plugin参数

设置别名alias

附上一份我的vue.config.js的配置

安装、构建、运行

定义全局axios拦截器

安装axios

定义axios的拦截

main.js导入axios.js

根组件（App.vue）

app.vue作为主组件在main.js中被使用

主组件app.vue调用其他组件

项目（请求/地址）根路径配置

往后端发送请求时的路径

地址栏的公共前缀。

修改端口号

引入less

引入依赖、创建应用实例、挂载根组件（main.js）

main.js-Vue3版

main.js-Vue2版

Reference

`configureWebpack` 方式

`chainWebpack` 方式