目录
需要准备的包
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检查
})
这时再启动工程就可以看到我们添加的组件啦
