使用 VueCli 搭建 Vue3 + Vant + Ts4 技术栈

我心飞翔 分类:javascript

前言

之前一直使用的react框架,利用业余时间了解了vue的源码及Vue3的原理。更是巧合的是工作中要开发一个简单的移动端页面,所以借此机会调研了Vue3+Vant+Ts,算是第一次比较正式的使用Vue框架吧,同时也想让自己养成记录的好习惯,欢迎大家提意见哈!!!!

搭建项目

首先要确保全局安装

npm install -g @vue/cli-service-global
 

WX20210406-102423@2x.png

创建一个项目

vue create

运行以下命令来创建一个新项目:

vue create hello-world
 

为了项目配置的灵活性,这里选择第三项,回车

WX20210406-102705@2x.png
根据自己情况选择要配置的内容(点击空格为选择),回车

WX20210406-102823@2x.png

选择Vue版本3.x

WX20210406-104631@2x.png

项目中使用-组件类样式的语法

WX20210406-104755@2x.png

与TypeScript一起使用Babel

WX20210406-104820@2x.png

hash路由还是history路由

WX20210406-104838@2x.png

css预处理器的选择

WX20210406-104854@2x.png

ESLint标准选择

WX20210406-104915@2x.png

校验时机

WX20210406-104933@2x.png

校验规则的保存方式

WX20210406-104954@2x.png

项目目录

node_modules    ---依赖文件夹
public          ---公共文件夹
src  					   ---项目主要文件夹
.gitignore  		---排除git提交配置文件
babel.config.js ---babel配置文件
package.json  	---模块描述文件
tsconfig.json  	---ts配置文件
.eslintrc.js  	---eslint规范配置文件
 

开发前配置

vant UI配置

# Vue 3 项目,安装 Vant 3:
npm i vant@next -S
 

自动按需引入组件

babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。

# 安装插件
npm i babel-plugin-import -D
 

在babel.config.js中添加vant配置

// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'import',
      { libraryName: 'vant', libraryDirectory: 'es', style: true },
      'vant',
    ],
  ],
};

 
浏览器适配

添加meta配置

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 

Rem布局适配,根据官网提供方式进行配置

如果需要使用 rem 单位进行适配,推荐使用以下两个工具:

  • postcss-pxtorem 是一款 PostCSS 插件,用于将 px 单位转化为 rem 单位
  • lib-flexible 用于设置 rem 基准值
//.postcssrc.js
module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8'
      ]
    },
    'postcss-pxtorem': {
      rootValue: 37.5,//因为vant的根字体大小是37.5
      propList: ['*']
    }
  }
}
 

国际化配置

yarn add vue-i18n
 

在main.ts中进行注册

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import i18n from "./language/i18n";

const app = createApp(App);

app.use(i18n);
app.use(store).use(router).mount("#app");
 

在src下创建language文件夹,及以下文件

language   	---国际化根文件夹
    cn.ts  	---中文
    cn.ts  	---英文
     .
     .
     .
    i18n.ts	---配置文件
    index.ts    ---国际化创建
 
//src/language/i18n.ts
import { createI18n } from "vue-i18n";
import messages from "./index";

const il8n = createI18n({
  locale: "cn",
  messages,
});

export default il8n;
 
//src/language/index.ts
import cn from "./cn";
import en from "./en";
export default {
  cn,
  en,
};
 
//src/language/en.ts
const en = {
  message:'Hello'
};

export default en;

 
//src/language/cn.ts
const cn = {
  message:'你好'
};

export default cn;
 
<!--vue页面中使用-->
<template>
  <van-popup
    v-model:show="_show"
    closeable
  >
    <div class="header">
      <span class="text">{{$t('message')}}</span>
    </div>
  </van-popup>
</template>
 

src文件夹

assets   					---静态文件夹
components  			                ---组件文件夹
router  					---路由,这里使用的是vue-router 4.x
store  						---vuex,这里使用的是4.x
views  						---页面文件
App.vue  					---页面入口文件
main.ts  					---项目入口文件
shims-vue.d.ts                                  ---类型定义文件(描述文件)
 

路由文件--自动创建,并且会在main.ts中进行注册

//router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router
 
//main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')
 

store文件--自动创建,同样会在main.ts中进行注册,如上

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})
 

vue-class-component与defineComponent

<!-- views/Home.vue -->
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

@Options({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {}
</script>
 

你会发现自动创建的vue文件中使用了vue-class-component,网址:class-component.vuejs.org/

Vue Class Component is a library that lets you make your Vue components in class-style syntax

对于vue3使用Vue Class Component v8

yarn add vue-class-component@8.0.0-rc.1
 
<!-- 
defineComponent最重要的是:在TypeScript下,给予了组件 正确的参数类型推断 。 
-->
<template>
	<van-skeleton title :row="3" :loading="loading" class="carSke">
		<van-cell-group class="card">
			<van-cell class="van-cell-top">
				<template #title>
					<div class="van-cell-title">{{requirementName}}</div>
				</template>
			</van-cell>
		</van-cell-group>
	</van-skeleton>
</template>

<script lang="ts">
import { defineComponent,onMounted, reactive, computed, toRefs } from 'vue';
import { Cell, CellGroup, Skeleton } from 'vant';
export default defineComponent({
  name: 'ListRequirements',
	components: {
		VanCellGroup: CellGroup,
		VanCell: Cell,
		VanSkeleton: Skeleton,
	},
	setup() {
		const state = reactive({
			requirementName: '',
		});
		return {
			...toRefs(state),
		};
	},
})
</script>
 
/*shims-vue.d.ts*/
/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}
 

回复

我来回复
  • 暂无回复内容