Vue3+Vite+Ts创建项目

 项目说明

一.脚手架

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
/// 

// 简单版本
// 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/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
  /// 
  
  // 简单版本
  // 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.创建主布局文件

4.设置路由

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

• 安装

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

• $ cnpm i vue-router -S

4.1 设置基本布局组件

  import Layout from './layout/index.vue'

4.2 设置基本页面

5.2.1 系统首页

5.2.2 企业管理

• 轮播图列表

• 
  
  
  
  
  
  
  
  
  
  
  
  
  
  添加轮播图
  
  
  
  
  
  

5.2.3 产品管理

5.2.4 账户管理

5.2.5 登录页面

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使用路由

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

  // 一定要注释掉
  // import Layout from './layout/index.vue'

5.3.7 主界面设置路由视图

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