从零创建一个Vue3+ts项目

从零创建一个Vue3+ts项目

node版本不能过低
TS环境
基于vite创建的项目

npm install -g typescript

vue环境 （npm install -g @vue/cli 可创建vue2和vue3项目）

卸载旧的脚手架环境
npm uninstall vue-cli -g
安装新的脚手架环境
npm install -g @vue/cli
检查
vue --version

安装vscode插件

Vetur插件需要禁用, 与Volar插件冲突

Vue Language Features (Volar) 安装Volar Vue3提示插件

Vue VSCode Snippets

项目的初始化

1. 新建一个脚手架项目：bmdsutdios-mobile-client

   # 找一个干净地方：   day01/demo/
   vue  create  bmdsutdios-mobile-client
   

   依次选择：

   第一步:
   	Manually select features
   第二步:
       Babel
       TypeScript
       Router
       Vuex 
       CSS Pre-prcessors
       Linter / Formatter
   第三步：
   	3.x
   后续步骤一路回车即可
   

   安装模块：

   cd  bmdstudios-mobile-client
   npm  i  axios  -S
   

   启动脚手架：

   npm run serve
   

在项目中引入vant组件库

注意：安装node15以上的稳定版本。自动引入组件的插件需要它。

1. 在项目根目录下安装vant组件库：

   npm i vant            #vue3
   npm i vant@latest-v2  #vue2
   

2. 在项目中按需引入组件样式，需要先安装自动引入组件的插件：

   npm i unplugin-vue-components -D
   

3. 配置VueCLI的配置文件：vue.config.js

   const { defineConfig } = require('@vue/cli-service')
   const { VantResolver } = require('unplugin-vue-components/resolvers');
   const ComponentsPlugin = require('unplugin-vue-components/webpack');
   
   module.exports = defineConfig({
     transpileDependencies: true,
     configureWebpack: {
       plugins: [
         ComponentsPlugin({
           resolvers: [VantResolver()],
         }),
       ],
     },
   })
   

搭建项目的初始化布局结构

初始化App.vue的默认结构。

<template>
  <router-view />
</template>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
</style>

项目分为两大部分：

1. 每个模块的主题内容（上半部分）。
2. 底部选项卡（下半部分）。

实现底部选项卡

<div>
    <van-tabbar v-model="active" active-color="#f03d37">
      <van-tabbar-item replace to="/home/index">首页
        <template #icon="props">
          <img :src="require(`@/assets/tabs/index_${props.active ? 1 : 0}.png`)" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="search">标签</van-tabbar-item>
      <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
      <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
    </van-tabbar>
  </div>

import { ref } from 'vue'
const active = ref(0)

详见vant组件库：van-tabbar。