vite+vue3+ts+element-plus项目搭建--超详细

迷南。 2022-09-11 05:13 273阅读 0赞

## vite+vue3+ts+element-plus项目搭建–超详细 ##

> **vite 作用**

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

> **使用的环境**

1.  node v12.19.0
2.  @vue/cli 4.5.8

> **搭建项目**

npm init vite-app <project-name>
    cd <project-name>
    npm install
    npm run dev

或

yarn create vite\-app <project\-name>  
cd <project\-name>  
yarn  
yarn dev

> **安装typescript、router、axios、element-plus插件**

npm install vue-router@next axios --save
    npm install typescript element-plus --save-dev

或

yarn add vue\-router@next axios  
yarn add typescript element\-plus –dev

> **配置**

**vite.config.ts**  
*vite.config.ts 相当于 @vue-cli 项目中的 vue.config.js*

import path from "path";

const pathResolve = (pathStr: string) => \{   
return path.resolve(\_\_dirname, pathStr);  
\}

const config = \{   
base: ‘./’,//在生产中服务时的基本公共路径。@default ‘/’  
alias: \{   
‘/@/’: pathResolve(’./src’),  
\},  
outDir: ‘vite-init’,//构建输出将放在其中。会在构建之前删除旧目录。@default ‘dist’  
minify: ‘esbuild’,//构建时的压缩方式  
hostname: ‘localhost’,//本地启动的服务地址  
port: ‘8800’,//服务端口号  
open: false,//启动服务时是否在浏览器打开  
https: false,//是否开启https  
ssr: false,//是否服务端渲染  
optimizeDeps: \{ // 引入第三方的配置  
include: \[‘axios’\]  
\},  
// proxy: \{//代理配置  
// ‘/api’: \{   
// target: ‘http://xx.xx.xx.xx:xxxx’,  
// changeOrigin: true,  
// ws: true,  
// rewrite: (path: string) => \{ path.replace(/^/api/, ‘’) \}  
// \}  
// \}  
\}  
module.exports = config;

**tsconfig.json**

{ 
      "compilerOptions": { 
        "target": "ES5",//指定ECMAScript的目标版本:'ES3'(默认)，'ES5'， 'ES2015'， 'ES2016'， 'ES2017'， 'ES2018'， 'ES2019'， 'ES2020'，或'ESNEXT'。
        "module": "commonjs",//指定模块代码生成:'none'， 'commonjs'， 'amd'， 'system'， 'umd'， 'es2015'， 'es2020'，或'ESNext'。
        "strict": true,//是否启用所有严格的类型检查选项。
        "baseUrl":"./",//用于解析非绝对模块名称的基本目录。
        "paths": { 
          "/@/*": ["./src/*"]
        },  
        "noImplicitAny": true, //对于隐含有'any'类型的表达式和声明引发错误。
        "esModuleInterop": true, //通过为所有导入创建名称空间对象，实现CommonJS和ES模块之间的互操作性。意味着“allowSyntheticDefaultImports”。
        "experimentalDecorators": true, //支持对ES7装饰器的实验性支持。
        "skipLibCheck": true, //跳过声明文件的类型检查。
        "forceConsistentCasingInFileNames": true //禁止对同一文件使用大小写不一致的引用。
      }
    }

**App.vue**  
*修改app.vue*

\}  
\}  
</script>

**Views**  
*在 src 下新建 views文件夹，并在文件夹内创建 index.vue*

*PS：在引入.vue文件时一定要带上后缀名，否则会报找不到文件*

**在views文件夹内创建 HelloWorld.vue**

<template>
      <h1>{ {  msg }}</h1>
      <button @click="realTime.count++">count is: { {  realTime.count }}</button>
      <button @click="handleclick">点击跳转其它路由</button>
      <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
    </template>

<span class="token keyword">function</span> <span class="token function">handleclick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/other'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      msg<span class="token operator">:</span> props<span class="token punctuation">.</span>msg<span class="token punctuation">,</span>
      realTime<span class="token punctuation">,</span>
      handleclick
    <span class="token punctuation">}</span>

\}  
\})  
</script>

**router**  
*在 src 下新建 router 文件夹，并在文件夹内创建 index.ts*

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

const routes: Array<RouteRecordRaw> = \[  
\{   
path: ‘/’,  
component: () => import("/@/views/index.vue")  
\},  
\]

export default createRouter(\{   
history: createWebHistory(),  
routes  
\})

**main.ts**  
*把原本的main.js改为main.ts,修改后别忘记把index.html里面也改为main.ts*

import {  createApp } from 'vue'
    import router from './router/index'
    import App from './App.vue'
    import ElementPlus from 'element-plus'

import ‘element-plus/lib/theme-chalk/index.css’  
import ‘./reset.css’

const app = createApp(App);  
app.use(ElementPlus);  
app.use(router);  
app.mount(’\#app’);

**在 ts 文件中引入 .vue 文件时出现以下报错，但是不影响代码正常运行 // 处理方法请看上一篇文章**

## 最后是我搭建各个版本的版本号 , 因为在搭建过程中会出现版本不一报错的问题 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1NTA0NA_size_16_color_FFFFFF_t_70]

转载：https://blog.csdn.net/weixin\_44255044/article/details/119566408

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1NTA0NA_size_16_color_FFFFFF_t_70]: /images/20220828/59257b9712924185a12adef550231925.png