Vue框架在项目开发中如何实现组件的复用？

本文共计707个文字，预计阅读时间需要3分钟。

目录 + 如何配置@绝对路径 + 第一种 + 直接使用@ + 第二种 + webpack.base.conf.js + 第三种 + vue.config.js配置 + vue路径写法：./ + 和 / + 项目中还有常见的@用法 + 如何配置@绝对路径 + 第一种 + 直接使用@ + 第二种 + vue项目中默认““

目录

• 如何配置@绝对路径
• 第一种 直接使用@
• 第二种 webpack.base.conf.js
• 第三种 vue.config.js配置
• vue路径写法：./ 和 @/
• 项目中还有常见的@用法

如何配置@绝对路径

第一种 直接使用@

vue项目中默认定义了@（最常用）和vue$两个别名 ， @这东西代表着到src这个文件夹的路径，

下面所属目录可以直接 @/views @/components @/store @/router @/assets

    ├── vue.config.js      ├── package.json      ├── babel.config.js      ├── public         └──index.html      ├── src                  └── assets         └── components         └── store         └── router         └── view         └── app.vue         └── main.js

第二种 webpack.base.conf.js

在vue项目开发中经常引用JS、CSS、IMG文件。当项目较大时文件层级很多，导致路径很长，我们可以通过在bulid > webpack.base.conf.js 设置简便的引用路径

resolve: {     extensions: ['.js', '.vue', '.json'],     alias: {       'vue$': 'vue/dist/vue.esm.js',       '@': resolve('src'),       // add assets路径   给src/assets设置引用路径 assets  使用就是  "~assets"       'assets': resolve('src/assets'),            //  add static路径  给static设置引用路径 static  使用就是 "~static"       'static': path.resolve(__dirname, '../static'),    },

注意事项，设置好引用路径，必须要重启项目才能生效。不然会报错 配置JS、CSS文件同样操作

第三种 vue.config.js配置

项目中使用引入文件有时候路径比较深，需要使用"…/…/…/xx.js"这种类似的路劲引入，这种方式比较笨，可以使用webpack的别名alias配置来解决。

首先，先确定node_modules项目中是否有path模块， 如果没有path模块需要先安装path

npm install path --save

以下为vue.config.js配置

const path = require("path"); function resolve(dir) {   return path.join(__dirname, dir); }   module.exports = {   chainWebpack: config => {     config.resolve.alias       .set("@", resolve("src"))       .set("@assets", resolve("src/assets"))       .set("@components", resolve("src/components"))       .set("@base", resolve("baseConfig"))       .set("@public", resolve("public"));   }, }

vue路径写法：./ 和 @/

vue在引用路径的时候可以用 ./ 的写法引用如下：

import './api/index'

这个代表在相同文件下绝对路径的意思。

项目中还有常见的@用法

import Background from '@/assets/images/background.jpg'

这个@是在 webpack.base.conf.js （vue.config.js）文件里配置的：

configureWebpack: {     // provide the app's title in webpack's name field, so that     // it can be accessed in index.html to inject the correct title.     name: name,     resolve: {       alias: {         '@': resolve('src'),         '@crud': resolve('src/components/Crud')       }     }   },

这里的@就代表是 src，所以就在 src 路径下找文件，也可以自己配置，这也是常见的路径写法！

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。