Vue3+Vite+Ts(手把手教你创建项目)

前端青山

已于 2023-11-27 11:15:27 修改

阅读量1.2k

点赞数 7

分类专栏： Vue.js入门到实战文章标签： arcgis 前端 es6 vue.js typescript

于 2023-11-08 14:19:13 首次发布

本文链接：https://blog.csdn.net/2302_76329106/article/details/134287975

版权

Vue.js入门到实战专栏收录该内容

34 篇文章 8 订阅

订阅专栏

项目说明

一.脚手架

vite

vue-cli   ==》 webpack

vite脚手架使用

官网：https://vitejs.cn/

Vue3 vite官网：https://cn.vitejs.dev/

Vite下一代的前端工具链，为开发者提供急速响应

# 安装
$ cnpm i vite -g
$ vite -v
vite/4.0.3 darwin-x64 node-v16.13.1

windows注意处理 /vite.psl文件

Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。
一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

二. 如何搭建vue3项目

使用npm

# 如果选择npm创建项目再执行
$ npm create vite@latest
使用yarn，如果电脑没有安装yarn cnpm i yarn -g

$ yarn create vite
使用pnpm：如果电脑尚未安装 pnpm cnpm i pnpm -g

$ pnpm create vite

对比	yarn	npm	pnpm
初始化	yarn init	npm init	利用硬链接和符号连接来避免复制所有本地缓存资源文件
安装依赖	yarn install 或者yarn	npm install 或 npm i	pnpm install
新增依赖	yarn add vant	npm i vant -S	pnpm i vant
删除依赖	yarn remove vant	npm uninstall vant -S
删除devDependencies 依赖		npm uninstall vant -D
更新依赖	yarn upgrade	npm update	pnpm update
全局安装或者删除	yarn global remove vue-cli	npm uninstall vue-cli -g
同时下载多个	yarn add axios vue-axios	npm i axis vue-axios -S

1.创建项目

$ npm init vue@latest

|- vue3-admin-app  # 项目名称
    |- node_modules  # 项目依赖包
  |- public
    favicon.ico      # 网页图标
  |- src                     # 写代码的主场
    |- assets            # 资源文件
        base.css     # 基础样式
        logo.svg     # logo
        main.css     # 项目样式
        |- components  # 自定义组件
        |- icons     # 图标组件
        HelloWorld.vue # 自定义组件
        TheWelcome.vue # 自定义组件
        welcomeItem.vue # 自定义组件
    |-router       # 路由文件夹
        index.ts     # 路由配置
    |- stores      # 状态管理器文件夹
        counter.ts   # 状态管理器模块
    |- views       # 项目页面组件
        AboutView.vue # 页面
        HomeView.vue  # 页面
    App.vue         # 项目跟组件
    main.ts         # 项目入口文件
  .eslintrc.cjs     # 代码格式化说明
  .gitignore        # git上传忽略文件
  .prettierrc.json  # 格式化配置
  env.d.ts                  # 环境配置声明文件 - ts 中
  index.html        # 页面模版
  package.json      # 项目依赖说明以及运行命令
  README.md                 # 说明文档
  tsconfig.node.json # ts的配置文件说明 - 本项目部分
  tsconfig.json              # ts的配置文件说明 - 公共部分
  vite.config.ts             # vite的配置文件

1.1 调整代码

打开src/mian.ts发现在引入 App.vue中画红线，说明项目中没有.vue的声明文件，需要自行补充一下

// env.d.ts
/// <reference types="vite/client" />

// 简单版本
// declare module '*.vue'

// 推荐
declare module '*.vue' {
  // 引入vue模块中ts的方法
  import type { DefineComponent } from 'vue'
  // 定义vue组件以及类型注解
  const component: DefineComponent<{}, {}, any>
  export default component
}

再次打开 src/main.ts发现红线丢失

复制src文件夹，保留App.vue以及main.ts基本内容

// src/main.ts 入口文件
import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)

app.mount('#app')

2.准备工作

？样式处理 css、sass、less 、stylus

sass、less、stylus 为 css 预处理器

.contianer {}
.container .box {}
.container .box .header {}
.container .box .content {}
.container .box .footer {}

// scss
.contianer {
    width: 100%
    .box {
        width: 100%
        .header {
        width: 100%
        }
        .content {
            width: 100%  
        }
        .footer {
         width: 100%
        }
    }
}

// .less
.contianer {
    width: 100%
    .box {
        width: 100%
        .header {
        width: 100%
        }
        .content {
            width: 100%  
        }
        .footer {
         width: 100%
        }
    }
}

// stylus
.container
    width 100%
    .box
        width 100%
        .header
        width 100%
        .content
        width 100%
        .footer
        width 100%

?? 本项目用什么，建议大家先选择UI组件库（element-plus / ant-design-vue）

使用重置样式表

# 需要安装

$ cnpm i normalize.css -D

<!-- src/App.vue -->
<script setup lang="ts">
</script>

<template>
  <div>App</div>
</template>

<style scoped>

</style>


// src/main.ts 入口文件
import { createApp } from 'vue'

import App from './App.vue'

// 重置样式表
import 'normalize.css/normalize.css'

const app = createApp(App)

app.mount('#app')

组件库 element plus

# 需要安装(如果安装失败， 更新cnpm）  
# npm install -g cnpm --registry=https://registry.npmmirror.com
$ cnpm i element-plus -S

Element-plus 默认使用英文，如果需要使用中文包，如下操作

// src/main.ts 入口文件
import { createApp } from 'vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

import App from './App.vue'

// 重置样式表
import 'normalize.css/normalize.css'

const app = createApp(App)

app.use(ElementPlus, {
locale: zhCn
})

app.mount('#app')

// env.d.ts
/// <reference types="vite/client" />

// 简单版本
// declare module '*.vue'

// 推荐
declare module '*.vue' {
// 引入vue模块中ts的方法
import type { DefineComponent } from 'vue'
// 定义vue组件以及类型注解
const component: DefineComponent<{}, {}, any>
export default component
}

declare module 'element-plus/dist/locale/zh-cn.mjs';

3.创建主布局文件

<!-- src/App.vue -->
<script setup lang="ts">
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<style>
html, body, #app, .common-layout {
  height: 100%;
}
.common-layout .el-container {
  height: 100%;
  background-color: #f0f2f5;
} 
.common-layout .el-container .el-aside {
  background-color: #001529;
}
.common-layout .el-container .el-header {
  background-color: #fff;
}
.common-layout .el-container .el-main {
  background-color: #fff;
  margin: 16px;
}
.common-layout .el-container .el-footer {
  background-color: #fff;
}
</style>

4.设置路由

https://router.vuejs.org/zh/

安装

# 本项目中创建时已经安装过了

```
$ cnpm i vue-router -S
```

4.1 设置基本布局组件

<!-- src/layout/index.vue -->
<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>
<!-- src/App.vue -->
<script setup lang="ts">
  import Layout from './layout/index.vue'
</script>

<template>
  <Layout />
</template>

<style>
html, body, #app, .common-layout {
  height: 100%;
}
.common-layout .el-container {
  height: 100%;
  background-color: #f0f2f5;
} 
.common-layout .el-container .el-aside {
  background-color: #001529;
}
.common-layout .el-container .el-header {
  background-color: #fff;
}
.common-layout .el-container .el-main {
  background-color: #fff;
  margin: 16px;
}
.common-layout .el-container .el-footer {
  background-color: #fff;
}
</style>

4.2 设置基本页面

5.2.1 系统首页

<!-- src/views/home/index.vue -->
<script lang="ts" setup></script>

<template>
  <div>系统首页</div>
</template>

5.2.2 企业管理

轮播图列表

<!-- src/views/corp/index.vue -->
<script lang="ts" setup></script>

<template>
  <div>企业管理</div>
</template>
<!-- src/views/corp/components/home.vue -->
<script lang="ts" setup>
</script>

<template>
  <div>企业列表查询</div>
</template>
<!-- src/views/corp/components/kind.vue -->
<script lang="ts" setup>
</script>

<template>
  <div>分企业教育培训</div>
</template>
添加轮播图

<!-- src/views/corp/add.vue -->
<script lang="ts" setup>
</script>

<template>
  <div>添加企业</div>
</template>

5.2.3 产品管理

<!-- src/views/pro/list.vue -->
<script lang="ts" setup>
</script>

<template>
  <div>产品列表</div>
</template>
<!-- src/views/pro/search.vue -->
<script lang="ts" setup>
</script>

<template>
  <div>筛选列表</div>
</template>

5.2.4 账户管理

<!-- src/views/account/admin.vue -->
<script lang="ts" setup>
</script>

<template>
  <div>管理员列表</div>
</template>
<!-- src/views/account/user.vue -->
<script lang="ts" setup>
</script>

<template>
  <div>用户列表</div>
</template>

5.2.5 登录页面

<!-- src/views/login/index.vue -->
<script lang="ts" setup>
</script>

<template>
  <div>登录页面</div>
</template>

5.3 设置路由模块

真实项目开发时，可能轮播图产品账户是不同的人开发以及维护的，所以建议将这几个路由的配置分离开来

然后再统一整合管理即可

5.3.1 账户管理路由

// src/router/modules/account.ts
// @符号代表 src 目录结构，避免过多写 ./  ../
import Layout from '@/layout/index.vue'
import User from '@/views/account/user.vue'
import Admin from '@/views/account/admin.vue'

// 账户管理是一个整理
export default {
  path: '/account', // 账户管理的路由
  redirect: '/account/admin', // 路由的重定向 ，当用户输入/account，地址自动跳转到/account/admin
  component: Layout, // 主界面布局，
  meta: { // 路由元信息 添加额外的信息
    title: '账户管理',
    icon: 'UserFilled'
  },
  children: [ // 子路由
    {
      path: '/account/admin',
      component: Admin,
      meta: {
        title: '管理员列表',
        icon: 'User'
      }
    },
    {
      path: '/account/user',
      component: User,
      meta: {
        title: '用户列表',
        icon: 'User'
      }
    }
  ]
}

5.3.2 企业信息路由

// src/router/modules/banner.ts
import Layout from '@/layout/index.vue'
import Add from '@/views/banner/add.vue'
import List from '@/views/banner/index.vue'
import CorprListHome from '@/views/banner/components/home.vue'
import CorpListKind from '@/views/banner/components/kind.vue'

export default {
  path: '/corp',
  component: Layout,
  redirect: '/corp/list',
  meta: {
    title: '企业管理',
    icon: 'PictureFilled'
  },
  children: [
    {
      path: '/corp/list',
      component: List,
      redirect: '/banner/list/home',
      meta: {
        title: '企业列表',
        icon: 'PictureFilled'
      },
      children: [
        {
          path: '/corp/list/home',
          component: BannerListHome,
          meta: {
            title: '首页轮播图列表',
            icon: 'PictureFilled'
          }
        },
        {
          path: '/corp/list/kind',
          component: BannerListKind,
          meta: {
            title: '企业轮播图列表',
            icon: 'PictureFilled'
          }
        }
      ]
    },
    {
      path: '/banner/add',
      component: Add,
      meta: {
        title: '添加轮播图',
        icon: 'PictureFilled'
      }
    }
  ]
}

5.3.3 产品管理路由

// src/router/modules/pro.ts
import Layout from '@/layout/index.vue'
import ProList from '@/views/pro/list.vue'
import ProSearch from '@/views/pro/search.vue'
export default {
  path: '/pro',
  redirect: '/pro/list',
  component: Layout,
  meta: {
    title: '产品管理',
    icon: 'Fries'
  },
  children: [
    {
      path: '/pro/list',
      component: ProList,
      meta: {
        title: '产品列表'
      }
    },
    {
      path: '/pro/search',
      component: ProSearch,
      meta: {
        title: '筛选列表'
      }
    }
  ]
}

5.3.4 整合路由

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

import Layout from '@/layout/index.vue'
import Home from '@/views/home/index.vue'
import Login from '@/views/login/index.vue'

import bannerRoutes from './modules/banner'
import proRoutes from './modules/pro'
import accountRoutes from './modules/account'

const constantRoutes = [
  {
    path: '/login',
    component: Login
  },
  {
    path: '/',
    redirect: '/home',
    component: Layout,
    children: [
      {
        path: '/home',
        component: Home,
        meta: {
          title: '系统首页',
          icon: 'HomeFilled'
        }
      }
    ]
  }
]

const asyncRoutes = [
  bannerRoutes, proRoutes, accountRoutes
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [...constantRoutes, ...asyncRoutes]
})

export default router

5.3.5 入口文件配置路由

// src/main.ts 入口文件
import { createApp } from 'vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

import router from './router'

import App from './App.vue'

// 重置样式表
import 'normalize.css/normalize.css'

const app = createApp(App)

app.use(ElementPlus, {
  locale: zhCn
})

app.use(router)

app.mount('#app')

5.3.6 App.vue使用路由

区分登录页面- 非登录页面

<!-- src/App.vue -->
<script setup lang="ts">
  // 一定要注释掉
  // import Layout from './layout/index.vue'
</script>

<template>
  <!-- <Layout /> -->
  <!-- 
    /   /home   Home
    /login Login
   -->
  <RouterView></RouterView>
</template>

<style>
html, body, #app, .common-layout {
  height: 100%;
}
.common-layout .el-container {
  height: 100%;
  background-color: #f0f2f5;
} 
.common-layout .el-container .el-aside {
  background-color: #001529;
}
.common-layout .el-container .el-header {
  background-color: #fff;
}
.common-layout .el-container .el-main {
  background-color: #fff;
  margin: 16px;
}
.common-layout .el-container .el-footer {
  background-color: #fff;
}
</style>

5.3.7 主界面设置路由视图

主要区分是主界面的那一个页面

<!-- src/layout/index.vue -->
<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <!-- <el-main>Main</el-main> -->
        <el-main>
          <RouterView />
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>