vue3+vite2项目学习-创建配置

目录

1.通过vite创建 vue+ts 项目

 2.vite基本配置别名

3.安装配置使用vue-router

 4.安装配置vuex

5.安装 eslint

6.安装SCSS 

7.安装 element-plus

---

1.通过vite创建 vue+ts 项目

1. 在存放目录中，新建项目文件夹

2.打开项目文件夹，打开命令板

3.输入    npm init vite@latest   或者  yarn  create vite

4.项目名   dutiesVue3Vite2

5.选择框架 vue  /   vue-ts

6.初始化创建完成  

cd   // 进入项目

npm  install （或者   yarn） //  安装依赖

npm run  dev （或者    yarn dev）  // 运行项目

 2.vite基本配置别名

项目生成后，目录文件里面包含vite的配置文件vite.config.ts。而当以命令行方式运行 vite 时，vite 会自动解析项目根目录下名为 vite.config.ts 的文件。

2.1.先安装依赖   npm install @types/node --save-dev

2.2.vite.config.ts 配置文件，添加以下配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';   // 编辑器提示 path 模块找不到，可以cnpm i @types/node --dev 即可


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],     // 默认配置


  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')    // 配置别名；将 @ 指向'src'目录
    }
  },


  server: {
    host: true,        // 解决“vite use `host` to expose”
    port: 3000,       // 设置服务启动的端口号；如果端口已经被使用，Vite 会自动尝试下一个可用的端口
    open: true,       // 服务启动后自动打开浏览器
    proxy: {          // 代理
      '/api': {
        target: '真实接口服务地址',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')     // 注意代理地址的重写
      },
      // 可配置多个...
    }
  }
})

2.3 在 tsconfig.json 文件中添加

"skipLibCheck": true, // 解决打包报`vue-tsc --noEmit && vite build`的错,忽略所有的声明文件(*.d.ts)的类型检查
    "baseUrl": ".",
    "paths": {
      "@/*":[
        "src/*"
      ]
    }
// ts 排除的文件
"exclude": ["node_modules"]

每次安装依赖以后，重启项目，打包一下，看看有没有报错

打包： yarn build // yarn run build // npm run build

3.安装配置使用vue-router

这里安装的是 4.x 版本的vue-router

3.1npm install vue-router@4 --save

3.2创建src/router/index.ts文件，使用路由懒加载，优化访问性能。

import {
  createRouter,
  createWebHistory,
  createWebHashHistory,
  RouteRecordRaw
} from 'vue-router'

import routes from './routers' // 路由

const router = createRouter({
  history: createWebHistory(), // 使用history模式
  //history: createWebHashHistory(), // 使用hash模式
  routes: routes
})

export default router

3.4 在router目录下再创建一个routers.ts文件

import { RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/components/HelloWorld.vue') // 建议进行路由懒加载，优化访问性能
  }
  // {
  //   path: '/',
  //   name: '',
  //   component: () => import('../../views/login-after.vue'),
  //   meta: { requiresAuth: true },
  // },
  // {
  //   path: '/login',
  //   name: 'login',
  //   component: () => import('../../views/login.vue'),
  //   meta: { requiresAuth: true },
  // },
]
export default routes

 3.3 main.ts 里面引入router

import { createApp } from 'vue'

import App from './App.vue'

import router from './router/index'

createApp(App).use(router).mount('#app')

3.4 使用router

在App.vue 文件中使用router-view 组件，路由匹配到组件会通过router-view 组件进行渲染。

<template>
    <div id="nav">
        <router-link to="/">Home</router-link> 
    </div>
    <router-view />
<template>

 4.安装配置vuex

4.1 npm install vuex@next --save

4.2 配置store文件，创建src/store/index.ts文件

// store.ts
import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'

export interface State {
  count: number
}

export const key: InjectionKey<Store<State>> = Symbol()

export const store = createStore<State>({
  state: {
    count: 0
  }
})

// 定义自己的 `useStore` 组合式函数
export function useStore () {
  return baseUseStore(key)
}

4.3 main.ts 里面引入vuex

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import { store, key } from './store/index'

createApp(App).use(router).use(store, key).mount('#app')

5.安装 eslint

npm install --save-dev eslint-plugin-vue

在项目跟目录下新建 .eslintrc.json 文件

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'plugin:vue/essential', // vue2的规则
    // 在 node_modules/eslint-plugin-vue/lib/conmfigs 文件夹下
    'plugin:vue/vue3-strongly-recommended', // vue3
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {}
}

添加自动化代码修复

在package.json的script中添加

  "lint": "eslint ./src/**/*.{js,jsx,vue,ts,tsx}  --fix"

验证：npm run lint

eslint与编辑器集成

1. 禁用Vetur插件
2. 安装Vue Language Features (Volar)
3. 安装Element UI Snippets

a：只要安装并启动了eslint插件，它就会自动查找项目中的eslint配置规范，并且给出验证提示，

b: 如何格式化？eslint提供格式化工具，但是需要手动配置

配置：设置--扩展--eslint

 

6.安装SCSS 

npm i -D sass sass-loader

7.安装 element-plus

npm install element-plus --save

7.1全局导入：main.ts 里面全局完整引入 element plus

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

app.use(ElementPlus)

7.2 按需导入：

npm install -D unplugin-vue-components unplugin-auto-import

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}