vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)

fiveheng
738 阅读4分钟

1、vite 创建vue3项目

vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它做到了本地快速开发启动

优点

  • 快速的冷启动，不需要等待打包操作；
  • 即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
  • 真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。（平均一秒run）

2、初始化项目

(1) 在需要创建位置cmd目录下执行

npm init vite@latest

(2)输入项目名称

1726040334949.jpg

(3)选择vue（上下键选择，回车确认）

1726041208463.jpg (4) 选择语言，选TypeScript

1726041377531.jpg (5) 此时创建完毕

1726041469978.jpg

3.安装依赖

可直接根据上图提示执行操作
（1）进入刚刚创建的文件目录

cd five-heng

1726041703212.jpg （2）安装默认依赖
此处切换npm源，安装更快

npm config set registry https://registry.npmmirror.com

1726041873893.jpg 然后开始安装

npm install

1726041923697.jpg (3)运行项目

npm run dev

1726042121964.jpg

1726042167418.jpg

4. 初始配置

  • 1、配置所需依赖:
npm install @types/node --save-dev
  • 2、修改vite.config.ts配置文件代码:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  //解决“vite use `--host` to expose”
  base: './',
  server: {             
    host: '0.0.0.0',	
    // port: 8080,      
    open: true
  },
  resolve:{   
    //别名配置，引用src路径下的东西可以通过@如：import Layout from '@/layout/index.vue'
    alias:[   
      {
        find:'@',
        replacement:resolve(__dirname,'src') 
      }
    ]
  }
})

5. 安装路由

npm install vue-router@4
  • 1、在src目录下新建router文件夹，在router里创建index.ts文件

1726112361087.jpg

  • 2、index.ts中配置路由 下面@引入方式会报错，原因是还没配置，后面第7步会配置，此处错误可以先不管。
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
// import Layout from '../components/HelloWorld.vue'

const routes: Array<RouteRecordRaw> = [
  {
  //路由初始指向
    path: '/',
    name: 'HelloWorld',
    component:()=>import('../components/HelloWorld.vue'),
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router
  • 3、main.ts中导入挂载路由
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

const app = createApp(App);
app.use(router).mount('#app')
  • 4、 修改App.vue管理路由
<script setup lang="ts">
</script>
<template>
  <router-view></router-view>
</template>

<style>

</style>
  • 5、可以保存后，运行看是否报错。如图打开了路由指向的HelloWorld.vue页面的内容就对了

1726113229489.jpg

6、配置ts文件采用@方式导入

在tsconfig.json文件中添加配置（下图打注释的都是添加的，也可自己丰富）
配置完成后建议重新run一下

    {
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true, 
    "lib": ["esnext", "dom"],
    "skipLibCheck": true,

    //添加---
    "suppressImplicitAnyIndexErrors": true,		//允许字符串用作下标
    "ignoreDeprecations":"5.0",		//高版本上句报错，此句解决。如此句报错可注释掉
     "baseUrl": ".",			
     "paths": {					
      "@/*":[					
        "src/*"					
      ]							
     }							
     //---------
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }],
  
  //添加
  "exclude":["node_modules"]		// // ts排除的文件

}

7、安装代码检测工具（建议） 为了保证代码质量，添加代码检测

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

（1）在根目录创建.eslintrc.js文件

1726302384021.jpg

（2）复制代码

module.exports = {
	root: true,
	parserOptions: {
		sourceType: 'module'
	},
	parser: 'vue-eslint-parser',
	extends: ['plugin:vue/vue3-essential', 'plugin:vue/vue3-strongly-recommended', 'plugin:vue/vue3-recommended'],
	env: {
		browser: true,
		node: true,
		es6: true
	},
	rules: {
		'no-console': 'off',
		'comma-dangle': [2, 'never'] //禁止使用拖尾逗号
	}
}

8. css 预处理器 sass（看习惯）

npm install -D sass sass-loader


<style scoped lang="scss">
.read-the-docs {
  color: #888;
}
</style>

9.引入element-plus

(1) element-plus是vue3目前大流行组件库，用法基本和element ui一样
npm install element-plus --save
npm install @element-plus/icons-vue // 图标

main.ts 中引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from "element-plus/lib/locale/lang/zh-cn";//国际化

const app = createApp(App);

app.use(ElementPlus, { locale: zhCn }).use(router).mount('#app')

//全局注册图标组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
  • 问题
  • 1、国际化时如果安装了^2.3.8上的高版本或找不到包，解决方法： 需要在vite-env.d.ts加入
declare module "element-plus/dist/locale/zh-cn.mjs"

main.ts 中

import zhCn from "element-plus/dist/locale/zh-cn.mjs"
  • 若仍然有问题，修改为如下引用
import zhCn from "element-plus/es/locale/lang/zh-cn"
（2）使用element plus组件
<template>
  <el-button type="primary" size="default" :icon='Plus'>新增</el-button>
</template>
<script setup lang="ts">
import {Plus} from '@element-plus/icons-vue';

</script>
<style scoped lang="scss">

</style>

10. 安装pinia（状态管理，类似vue2中的vuex）

npm install pinia

全局引入pinia

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'   //国际化
import { createPinia } from 'pinia'

const app = createApp(App);
// 实例化 Pinia
const pinia = createPinia()

app.use(ElementPlus,{locale: zhCn}).use(router).use(pinia).mount('#app')

//全局注册图标组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

开发提示：

  1. 上面代码引用了默认的style.css文件（引用位置main.ts中），可能里面样式对我们开发有干扰，可自行处理修改style.css默认样式。建议：全删除，自己设置html，body，#app样式。以下参考可自行发挥：
*{
 margin: 0;
 padding: 0;
}
html,body,#app {
 width: 100%;
 height: 100%;
}
  1. 路径在src下的可以用@符号引用
import SysDialog from '@/components/SysDialog.vue';
avatar
文章
阅读
粉丝