vue3组件安装及配置

目录

一，NodeJS安装

二，vue3使用

三，Vue-Router使用

四，使用@别名

五，pinia使用

六， 使用Element Plus

---

1.NodeJS官网下载与安装https://nodejs.org/zh-cn/https://nodejs.org/zh-cn/2.下载完成后打开命令提示符

检查nodejs版本：

 node  -v

检查npm版本：

npm  -version

二，vue3使用

1，vue3官网

Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)https://cn.vuejs.org/2，通过Vite建立项目

①打开命令提示符，全局安装vite

npm  install   -g   vite@latest

②npm更新版本（非必要）

npm   install   -g   npm

③在命令提示符中选择目录后，在此目录下创建文件项目

npm   init   vite@latest   文件项目名字    --   --template   vue-ts

④vscode打开文件项目

 ⑤在vscode终端输入命令运行

npm   install

npm   run   dev

 

三，Vue-Router使用

1，使用vscode的终端安装组件

    npm  install   vue-router@4

 安装成功后，在package-lock.json文件中看到

如下图： 

2，添加路由，在src目录下建立router文件夹，并在router文件夹下创建文件index.ts

import { createRouter, createWebHashHistory, createWebHistory } from "vue-router";
const routes = [
    {
        path: '/',
        component: () => import("../views/Hello.vue")
    },

    {
        path: '/product',
        component: () => import("../views/product/Index.vue"),
        children: [{
            path: '/product/goods',
            component: () => import("../views/product/Goods.vue")
        },
        {
            path: '/product/price',
            component: () => import("../views/product/Price.vue")
        }
        ]
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

3，在main.ts文件中加入并使用router路由

import { createApp } from 'vue'
import App from './App.vue'

//加入路由
import router from './router/index';
//并通过use，使用路由
createApp(App).use(router).mount('#app')

4.在App.vue 添加导航，并使用router-view

 5,查看效果

 

四，使用@别名

1，在终端安装组件

 npm install @types/node --save-dev

2. 在vite.config.ts里面配置resolve

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path,{resolve}from 'path'


  export default defineConfig({
    plugins: [vue()],
    server: {
  
      port: 4020, // 你需要定义的端口号
  
    },

   resolve: {
    // 配置路径别名
    alias: {
      '@': path.resolve(__dirname, './src'),
    }
  },
  
  })

 3，检查tsconfig.node.json文件中是否有下面代码，如果没有就加上去

 "allowSyntheticDefaultImports": true

4，如果提示有标红波浪,在tsconfig.json文件 添加如下代码.

    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }

 5，这样就可以把@代替成src目录

 

五，pinia使用

1，pinia官网

Home | Pinia (vuejs.org)https://pinia.vuejs.org/2，在终端安装pinia组件

npm install pinia

npm install pinia-plugin-persist

 2，在src目录下建立store目录，在store目录下创建index.ts文件

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

const store = createPinia()
store.use(piniaPluginPersist)
export default store

 再在store目录下建立appstore.ts文件

import { defineStore } from "pinia";

export const appStore = defineStore({
    id: 'myapp',
    state: () => {
        return {
            name: "",
            age: 0,
        }
    },
    getters: {

    },
    actions: {

    },
    persist: {
        enabled: true,
        strategies: [{
            key: 'my_app',
            storage: localStorage,
        }]
    }
})

3，在main.ts文件中导入并使用store

import { createApp } from 'vue'
import App from './App.vue'

//加入路由
import router from './router/index';
//并通过use，使用路由
//导入store
import store from './store/index'

const app=createApp(App)
app.use(router)
//使用store
app.use(store)
app.mount('#app')

4，登陆页面模拟用户存储

<template>
    主页
    <hr/>
    <input v-model="name" placenolder="请输入用户名" />
    <input v-model="age" placeholder="请输入用户年龄" />
</template>
<script setup lang="ts">
import { appStore } from '@/store/appStore';
import { storeToRefs } from 'pinia';
let { name, age } = storeToRefs(appStore());
</script>

六， 使用Element Plus

1，Element Plus官网

安装 | Element Plus (gitee.io)https://element-plus.gitee.io/zh-CN/guide/installation.html#%E7%8E%AF%E5%A2%83%E6%94%AF%E6%8C%812，终端安装Element Plus组件

npm install element-plus --save

npm install @element-plus/icons-vue

3，main.ts 使用 ElementPlus插件

import { createApp } from 'vue'
//导入store
import store from './store/index'

import App from './App.vue'
//加入路由
import router from './router/index'

//加入ElementPlus插件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
// 全局导入饿了么图标
for (const [key,component] of Object.entries(ElementPlusIconsVue)){
    app.component(key,component)
}
//通过use使用store
app.use(store)
//通过use使用路由
app.use(router)
//通过use使用ElementPlus插件
app.use(ElementPlus)
app.mount('#app')

4，使用Element Plus后的代码与效果