vue-cli3配置路径别名

vue.confg.js中添加配置

找到根目录下vue.confg.js中添加如下配置代码片段,如果没有这个文件,在根目录重新创建一个

const path = require("path");
function resolve(dir) {
    return path.join(__dirname, dir);
}

// vue.config.js 常⽤配置
module.exports = {
    chainWebpack: config => {
        config.resolve.alias
            //设置“src”目录别名为“@”
            .set("@", resolve("src"))
            // .set("views", resolve("src/views"))
    }
}

使用:

import MParent from ‘./views/Parent’
等同于
import MParent from ‘@/views/Parent’

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Vue2和Vue-cli中使用TypeScript需要进行一定的配置。下面是详细的配置步骤: 1. 安装TypeScript和相关依赖 首先需要安装TypeScript和相关依赖: ```bash npm install typescript ts-loader ``` 2. 配置tsconfig.json 在项目的根目录下创建一个tsconfig.json文件,并进行如下配置: ```json { "compilerOptions": { "target": "es5", "module": "es2015", "strict": true, "jsx": "preserve", "moduleResolution": "node", "esModuleInterop": true, "baseUrl": ".", "paths": { "@/*": ["src/*"] } } } ``` 其中的配置项意义如下: - target: 编译后的JavaScript代码的目标版本 - module: 模块化方式 - strict: 开启TypeScript的严格模式 - jsx: 支持使用JSX语法 - moduleResolution: 模块解析方式 - esModuleInterop: 支持导入非ES6模块的默认导出 - baseUrl: 模块解析的基础路径 - paths: 模块解析的别名配置 3. 配置webpack 在webpack.config.js中进行如下配置: ```javascript module.exports = { // ... resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'], alias: { '@': path.resolve(__dirname, 'src') } }, module: { rules: [ { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/] } } ] } // ... } ``` 其中的配置项意义如下: - extensions: 支持解析的文件扩展名 - alias: 模块解析的别名配置 - test: 匹配需要使用ts-loader处理的文件类型 - loader: 使用的loader - exclude: 排除不需要处理的文件夹 - options: ts-loader的配置项 4. 安装Vue的类型声明文件 需要安装Vue的类型声明文件,使得TypeScript能够正确地识别Vue相关的API。 ```bash npm install @types/vue -D ``` 5. 在组件中使用TypeScript 在Vue组件中,需要使用.ts或者.tsx文件作为组件的文件后缀,然后在脚本中使用TypeScript进行编写,例如: ```vue <template> <div>{{ message }}</div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator' @Component export default class HelloWorld extends Vue { message: string = 'Hello, World!' } </script> <style> /* ... */ </style> ``` 这样就可以在Vue2和Vue-cli中使用TypeScript进行开发了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

longerJue

你的鼓励是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值