基于webpack的vue项目使用别名避免../深路径

在vue的项目里,我们可以使用../这样的相对路径的方式引用不同目录的组件:

import userinfo from '../../../components/userinfo.vue';

使用../引用的路径比较深,定位路径和书写不方便,并且不直观。

由于项目是基于webpack,比较好的做法是使用webpack对路径定义一个别名。

在webpack.base.config.js找到resolve节点,配置别名如下:

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
    '@components': path.resolve(__dirname, '../src/components')
  }
},

不同组件之间引用,如上面的示例:

import userinfo from '@components/userinfo.vue';

这样引用就一目了然。

版权声明:著作权归作者所有。

相关推荐

查看项目使用Swift的版本

使用xcode创建swift项目,你需要知道在项目中正在使用的swift版本。使用终端查看:swift -version 比较稳妥的方法是在xcode上查看,因为每个项目可能设定的swift 版本不一样。按路径打开:Project -> 选择项目的target -> Build Settings ->

使用stackblitz在线运行github上基于Angular CLI构建的项目

在Github上面有很多Angular的demo,示例等等,我们要运行Github里的示例,需要经过下载,初始化项目,然后才到运行项目,这中间会花去很多时间。有一个叫做StackBlitz的项目,它可以看作一个轻量级的在线的IDE,它允许我们在线运行基于Angular CLI构建的项目。更进一步,对于Github上的项目,我们只需要简单地在浏览器输入对应的url即可运行我们想要的项目。示

Vue实例里this的使用

要理解Vue实例里this的使用,首先要理解this在JavaScript里的用法,可以参考理解JavaScript普通函数以及箭头函数里使用的this。这是vue文档里的原话:All lifecycle hooks are called with their 'this' context pointing 

使用webpack构建vue项目

简单记录下使用webpack构建vue项目。环境依赖1、安装vueyarn add vue 2、安装webpack相关开发包yarn add webpack babel-core babel-loader babel-preset-env --dev 3、安装vue-loader和vue-template-compil