【web系列八】vscode下vue3+vue/cli+pinia+elementplus+typescript搭建前端开发环境

需要准备的包

vscode
https://code.visualstudio.com/#hundreds-of-extensions
node.js
http://nodejs.cn/download/

配置环境

node.js

直接使用下载的安装包安装，node.js附带了npm，npm类似于python中的pip

vue-cli

全局安装

npm install -g @vue/cli

查看版本

vue -V

pinia

npm install -s pinia

element-plus

npm install element-plus --save
# 创建项目
```bash
vue create test

配置选项如下

勾选上typescript

导入pinia

将main.ts改成如下形式：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

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

导入element-plus

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(router).use(ElementPlus).use(createPinia()).mount('#app')

启动项目

cd test

开发者模式

npm run serve

生产模式

npm run build

使用Pinia+添加一个vue组件

创建商店

在src下新建一个store文件夹，并在store中新建一个index.js文件

import { defineStore } from 'pinia'

export const mainStore = defineStore('main', {
	state: ()=>{
		return {
			hello: 'Hello Pinia!'
		}
	},
	getters: {},
	actions: {}
})

创建新组件

在components文件夹下创建一个Hello.vue

<template>
	<div id='app'>
		<h3>{{ store.hello }}</h3>
		<h3>解构：{{ hello }}</h3>
	</div>
</template>

<script setup>
import { mainStore } from '../store'
import { storeToRefs } from 'pinia'

const store = mainStore()
const { hello } = storeToRefs(store)
</script>

<style></style>

部署组件

咱们就给他部署在主页上，修改一下HomeView.vue

<template>
	<div class='home'>
		<img = alt='Vue logo' src='../assets/logo.png'>
		<HelloWorld msg='Welcome to Your Vue.js + TypeScript App'/>
		<Hello></Hello>
	</div>
</template>

<script lang='ts'>
import { Options, Vue } from 'vue-class-component';
import HelloWorld from '@/components/HelloWorld.vue';
import Hello from '@/components/Hello.vue';

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

关闭格式检测

这时如果直接运行的话，会报错
Component name “Hello” should always be multi-word
这是由于Vue的ESLINT检查，具体原因如下：
https://blog.csdn.net/u013078755/article/details/123581070
咱们只要修改一下vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
	transpileDependencies: true,
	lintOnSave: false //关闭eslint检查
})

这时再启动工程就可以看到我们添加的组件啦

参考资料

https://blog.csdn.net/u013078755/article/details/123581070