vite+ts+vue3+pinia+vue-router+element plus框架搭建

前言：

        最近，公司有个项目，要求用vue3+vite+ts开发，前端技术不断更新，这就需要我们不断地更新自己的技术，不断的学习来充实自己。

        话不多说，直接开撸。

 准备工作：

        node环境是必须的，此处省去node安装以及配置方法。

安装步骤：

1. 执行命令：npm create vite
2. 在执行过程中会让你输入项目名称：Project name
3. 然后选择项目框架：Select a framework（此处按上下箭头选择Vue）
4. 最后选择开发用的语言：Select a variant （此处按上下箭头选择 TypeScript）

最后安装完显示下图则安装成功

安装pinia： 

npm install pinia

安装成功后在src目录下新建stores文件，创建index.ts，复制代码： 

import { createPinia } from 'pinia';

// 创建
const pinia = createPinia()
// 导出
export default pinia

安装vue router：

npm install vue-router@4
或者
cnpm install vue-router@4

安装成功后在src目录下新建router文件，创建index.ts，复制代码：

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 
const routes: Array<RouteRecordRaw> = [
    {
        path: "/",
        component: () => import("../pages/login/LoginMain.vue")
    }
]
 
const router = createRouter({
    history: createWebHashHistory(),
    routes,
})
 
export default router

 安装element plus： 

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

引入并挂载

在main.ts中加入如下代码：

import './assets/styles/style.css';
import 'element-plus/theme-chalk/index.css';

import { createApp } from 'vue';

import ElementPlus from 'element-plus';

import App from './App.vue';
import router from './router';
import pinia from './stores/index';

const app:any = createApp(App);
app.use( pinia ).use( router ).use( ElementPlus ).mount('#app');

 运行项目：

进入项目文件：cd study_ten

安装依赖：npm install，如果安装比较慢，可以用淘宝镜像cnpm
cnpm的安装方式：执行命令 npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完镜像再执行命令：cnpm install

运行开发环境：npm run dev

项目启动成功如下图