柒沐的项目开发日志（2024.3.17-）

目录

基于已安装VS code+Node.js+Vite环境进一步完成Vue3+TypeScript项目网页开发

vue3新项目搭建

安装ELement Plus

初步构建一个基础框架​编辑

---

基于已安装VS code+Node.js+Vite环境进一步完成Vue3+TypeScript项目网页开发

vue3新项目搭建

1. 先在npm内创建新的vue3项目

   ## 1.创建命令
   npm create vue@latest
   
   ## 2.具体配置
   ## 配置项目名称
   √ Project name: vue3_test
   ## 是否添加TypeScript支持
   √ Add TypeScript?  Yes
   ## 是否添加JSX支持
   √ Add JSX Support?  Yes
   ## 是否添加路由环境
   √ Add Vue Router for Single Page Application development?  Yes
   ## 是否添加pinia环境
   √ Add Pinia for state management?  Yes
   ## 是否添加单元测试
   √ Add Vitest for Unit Testing?  Yes
   ## 是否添加端到端测试方案
   √ Add an End-to-End Testing Solution? » Yes
   ## 是否添加ESLint语法检查
   √ Add ESLint for code quality?  Yes
   ## 是否添加Prettiert代码格式化
   √ Add Prettier for code formatting?  No
   
   cd vue3_test
   npm install
   

2. 退出到vs code打开后安装插件
3. 再次安装，方便后续setup语法糖简化书写

   1. 第一步：`npm i vite-plugin-vue-setup-extend -D`
   2. 第二步：`vite.config.ts`
   
   ```jsx
   import { defineConfig } from 'vite'
   import VueSetupExtend from 'vite-plugin-vue-setup-extend'
   
   export default defineConfig({
     plugins: [ VueSetupExtend() ]
   })
   ```

安装ELement Plus

npm install element-plus --save

 引入 Element Plus
在 main.js 中引入 Element Plus：

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

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

初步构建一个基础框架

项目部分代码

//router 下的 Index.ts
import { createRouter, createWebHistory } from "vue-router";
const routes = [
    {
        path: '/home',
        component: () => import("../views/Home.vue")
    },
    {
        path: '/poduct',
        component: () => import("../views/poduct/Index.vue"),
        children: [
            {
                path: '/poduct/list',
                component: () => import("../views/poduct/List.vue"),
            }
        ]
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

//poduct 下的 Index.vue
<template>
    <fieldset>
        <router-view></router-view>
    </fieldset>
 
</template>
<script setup lang="ts">
 
</script>

//App.vue
<template>
    <div>
        <router-link to="/home">首页</router-link><br />
        <hr />
        <el-button type="primary">Primary</el-button>
        <router-view></router-view>
    </div>
</template>

<script lang="ts" setup name="App">
    
</script>

<style scoped>
    body {
        margin: 0;
        overflow-x: hidden;
        background-color: cornsilk;
        padding: 100px;
      }      
</style>

//main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'

import './style.css'

import App from './App.vue'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

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