创建vue3项目及配置

一、创建项目

方式一：使用vite

1、全局安装vite

npm install -g create-vite-app

2、使用vite安装vue3项目

npm init vite-app project_name （project_name为项目名）

3、安装依赖

cd project_name // 进入项目目录

npm install // 安装依赖

4、安装完成，运行

方式二：使用脚手架（@vue/cli 4.5.0+）

1、 安装或升级脚手架 npm install -g @vue/cli

2、需保证 vue cli 版本在 4.5.0 以上

　　// 查看版本 vue -V

3、创建项目

　　vue create project_name

4、安装完成，运行

二、引入路由vue-router

1、安装路由

npm install vue-router --save

2、在项目中创建路由模块

1、在src目录下创建router文件夹且创建index.js文件

import { createRouter, createWebHistory, createWebHashHistory } from "vue-router"
const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home', component: () => import('../components/HelloWorld.vue') }
]
const router = createRouter({
  history: createWebHashHistory(),// hash模式：createWebHashHistory history模式：createWebHistory
  routes
})

export default router

2、在main.js中引入路由文件index.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index.js'

const app = createApp(App) // 创建实例

app.use(router)

app.mount('#app')

3、在App.vue中添加如下代码

<template>
  <router-view></router-view>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

三、配置路由别名

1、cli方式：

在根目录创建 vue.config.js 文件

const path = require('path');
function resolve(dir) {
  // 设置绝对路径
  return path.join(__dirname, dir)
}

module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias
      // set(别名, 路径)
      .set('@', resolve('./src'))
  }
}

2、vite方式：(版本号：^2.5.10)

1、安装 @vitejs/plugin-vue 插件

cnpm install @vitejs/plugin-vue --save-dev

2、在根目录创建 vite.config.js 文件

// vite.config.js/ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

function _resolve (dir) {
  return path.resolve(__dirname, dir);
}

export default defineConfig({
  resolve: {
    alias: {
      '@': _resolve('src')
    }
  },
  plugins: [vue()]
})

四、其他配置

1、服务器主机名、端口号、

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    host: '192.168.1.79', // 指定服务器主机名
    port: 8080, // 指定服务器端口
    open: true, // 在服务器启动时自动在浏览器中打开应用程序 
    https: false, // 是否开启 https
  },
})

2、配置代理(跨域)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      "/api": {
        target: 'http://localhost:9000', // 所要代理的目标地址
        rewrite: path => path.replace(/^\/api/, ''), // 重写路径
        changeOrigin: true,
      },
    }
  },
})

3、配置打包路径、分块打包

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  //base: '/',//打包路径
  base: '/prject/',//打包路径
  build: {
    rollupOptions: {
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
      }
    }
  }
})

4、静态资源拆分打包，避免打包在一个文件里面导致文件过大

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        manualChunks (id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  }
})

5、gzip静态资源压缩

cnpm i vite-plugin-compression --save-dev

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [vue()],
    viteCompression({
      verbose: true,
      disable: false,// 不禁用压缩
      deleteOriginFile: false, // 压缩后是否删除原文件
      threshold: 10240,//大于10kb就压缩
      algorithm: 'gzip',// 压缩算法
      ext: '.gz',// 文件类型
    }),
})

6、清除console和debugger

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [vue()],
    build: {
     terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
  }
})

7、IE和旧版chrome兼容

cnpm i @vitejs/plugin-legacy -d--save

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacyPlugin from '@vitejs/plugin-legacy'

export default defineConfig({
    plugins: [
      vue(),
      legacyPlugin({
        targets: ['chrome 52'], // 需要兼容的目标列表，可以设置多个
        additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11时需要此插件
      })
    ],
})

五、vue api 自动导入

cnpm i -d--save unplugin-auto-import

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from "unplugin-auto-import/vite"

export default defineConfig({
    plugins: [
      vue(),
      AutoImport({
        // 自动导入vue相关的Api
        imports: ["vue",'vue-router',axios], // 也支持vue-router、axios等
        // 声明文件的存放位置
        dts: 'auto-imports.d.ts',
      }),
    ],
})

六、按需引入element-plus

cnpm i -d--save unplugin-auto-import
npm i -d--save unplugin-vue-components

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from "unplugin-auto-import/vite"
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
    plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
})

七、安装使用less

"less": "^4.1.2", "less-loader": "^10.2.0",

cnpm install less --save-d
cnpm install less-loader --save-d

配置全局样式

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

export default defineConfig({
    plugins: [vue()],
    css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        additionalData: `@import "${path.resolve(__dirname, 'src/assets/style/less/global.less')}";`
      }
    }
  }
})

src/assets/style/less/global.less

@color:red;

.font30{
  font-size: 30px;
}


////////使用
<style scoped lang="less">
p {
  color: @color;
  .font30();
  code {
    color: black;
  }
}
</style>

八、安装使用scss

"sass": "^1.51.0", "sass-loader": "^12.6.0",

cnpm install sass --save-d
cnpm install sass-loader --save-d

配置全局样式

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

function _resolve (dir) {
  return path.resolve(__dirname, dir);
}

export default defineConfig({
    plugins: [vue()],
    resolve: {
      alias: {
        '@': _resolve('src')
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          javascriptEnabled: true,
          additionalData: `@import "@/assets/style/scss/global.scss";`
        }
      }
    }
  }
})

src/assets/style/scss/global.scss

$color:red;
.font30{
  font-size: 30px;
}


////////使用
<style scoped lang="less">
p {
  color: $color;
}
</style>

九、axios封装

cnpm install axios --save

import axios from 'axios'

axios.defaults.timeout = 15000 // 设置请求超时时间 15s
axios.defaults.baseURL = 'url'; 

// !请求拦截
axios.interceptors.request.use(config => {
  return config
}, (err) => {
  return Promise.reject(err)
})


// !响应拦截
axios.interceptors.response.use(
  async (res) => {
      return res
  },
  (err) => {
    return Promise.reject(err)
  }
)

export { axios }

十、配置环境变量

在根目录创建.env、.env.production、env.development三个文件，文件中的变量必须以VITE_开头才被识别，在package.json中修改配置

"scripts": {
    "dev": "vite --mode development",
    "build": "vite build --mode production"
 },

//.env.development 开发环境
VITE_APP_TITLE=development

//.env.production 正式环境
VITE_APP_TITLE=production

//.env 
VITE_SSO=true

//使用
console.log(import.meta.env)