前端开发tips

vue配置启动项目自动打开浏览器

打开package.json找到启动命令npm run dev 跟npm run serve(这两种命令都可以) 后面增加 --open

Vue项目设置路径src目录别名为@

1. Vue2

编辑vue.config.js内容如下：

const { defineConfig } = require('@vue/cli-service')
 
const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
 
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,// 关闭Eslint语法检查
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src'),
      },
    },
  }, 
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3. Vue3

编辑vite.config.ts内容如下：

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11

编辑tsconfig.json内容如下：

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
    "paths": { //路径映射，相对于baseUrl
      "@/*": ["src/*"] 
    }
  }
}
1
2
3
4
5
6
7
8
9

Vue路由模块使用和封装模板

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10

App.vue

<template>
  <div id="app">
    <!--路由页面-->
    <router-view/>
  </div>
</template>

<script>
export default {
    name: 'App'
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12

/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// 插件初始化
Vue.use(VueRouter)
// 创建路由对象
const router=new VueRouter({
  routes:[
    {
      path:'/find',
      component: () => import('@/views/Find.vue'),
    },
    {
      path:'/friend',
      component: () => import('@/views/Friend.vue'),
    },
    {
      path:'/my',
      component: () => import('@/views/My.vue'),
    }
  ]
})

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