vue3+Pinia+typescript+vant移动端开发

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情

背景：

学习 vue3 的同时，拆分公司之前的 vue2 的项目中的部分功能，需要手写组件和二次封装组件，提高组件的易用性，延展性，安全性，边开发边总结，如有不对，还请见谅，踩坑中......。

技术栈：

1. vue3

1.1 安装vue3

$ npm init vue@latest

官方文档中所述，通过上述代码可以完成安装并创建项目，但是我尝试后，执行结果如下：

所以需要执行下面步骤来创建项目。

1.2 通过脚手架搭建项目

$ vue create my-demo-mobile

1.3 运行项目

$ npm run serve

2. Pinia

pinia 和 vuex 都是状态管理器，pinia 其实就是 vuex5。

pinia和vuex分析

// main.ts
import pinia from './store/index';

...

APP.use(pinia);

// store/index.js

import { createPinia } from 'pinia';
import piniaPluginPersist from 'pinia-plugin-persist';

const pinia = createPinia();
pinia.use(piniaPluginPersist);

export default pinia;

3. TypeScript

$ npm install -g typescript

使用ts：

<script lang="ts">
...
</script>

4. less

$ npm install less less-loader -D

$ npm install style-resources-loader -D
$ npm install vue-cli-plugin-style-resources-loader -D

在vue.config.ts中配置如下：

// webpack.config.js

module.exports = (env) => {
    return {
        
        ...
        
        module: {
            rules:[
            
                ...
                
                { // 样式处理
                    test: /\.(c|le)ss$/,
                    use: [
                        devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                        "css-loader",
                        "less-loader",
                    ]
                }, // loader加载顺序，从右到左，从上到下
                
                ...
                
            ]
        }
    }
}

5. <script setup>

是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 <script> 语法，代码更简洁。结合ts使用，能够自定义事件。

<script lang="ts" setup>
import { ref } from "vue";

// data
interface userT {
  username: string;
  password: string;
}
const userData = reactive<userT>({
  username: "admin",
  password: "123456",
});

// life cycles
onMounted(() => {
    ...
}),

watch('userInfo',(newValue,oldValue) => {
    console.log(newValue,oldValue);
})

// methods
function login = async () => {
    try {
        await ...
        ...
        
    } catch(error) {
        ...
    }
}
const getUserInfo = () => {
    try {
        ...
    } catch(error) {
        ...
    }
}

</script>

6. 接入vant组件库

$ npm install vant

这里接入了 vant4，适用于 vue3。

基础搭建结束，其中还有组件自动引入，可以使用 unplugin-auto-import。 下次开发再更新。。。