【WPF嵌套vue3】2.vue3 简单js框架代码编写及运行

搭建好的nodejs项目

1.vite中的默认运行命令是 npm run dev
2.webpack默认命令是 npm run serve
vite 我也是第一次使用，现在按照我以前用webpack的思路做一点配置及修改

依次做如下配置

• 修改默认启动端口(全局路径变量)，config文件修改后是需要重新启动的

修改项目根目录下的vite.config.ts文件
修改结果如下：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
      port: 3000 //默认端口
  },
  resolve: {
      alias: {
          '@': '/src' //全局路径变量
      }
  }
})

• 启动文件 main.ts修改
  在这里添加了 npm包:Elementps,element-icon
  同时添加了 自己写的 global.css(全局样式)、dataStrore.ts(全局变量)、router.ts(路由文件)

import {  createApp } from 'vue' 
import App from '@/App.vue' //主界面
import router from '@/router' //路由页面
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import '@/assets/scss/global.scss' //全局css
import '@/assets/ts/dataStore'  //全局变量

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.mount('#app')

• 修改主界面

<template>
  <div class="body">
      <router-view />
  </div>
</template>
<script setup lang="ts">
</script>
<style>
  html, body, .body, #app, .el-card__body {
      height: 100%;
  }
  * {
      margin: 0;
      padding: 0;
      font-family: 'Microsoft YaHei';
      box-sizing: border-box;
  }
</style>

• 运行后中文乱码问题

中文乱码有两种可能
1.app.vue 文件没有保存为UTF-8格式(默认创建项目保存的是ANSI格式)
2.ElementUI Plus没有使用中文(使用历史版本，非最新版本的Element plus有可能出现这个问题)
贴一段历史版本我以前写的 ElementUI历史版本 中文乱码的解决代码

<template>
  <el-config-provider :locale="zhCn">
      <router-view class="body" />
  </el-config-provider>
</template>
<style lang="scss">
  html, body, .body, #app, .el-card__body {
      height: 100%;
  }
  * {
      margin: 0;
      padding: 0;
      font-family: $font-PingFang;
      box-sizing: border-box;
  }
</style>
<script lang="ts" setup>
  import { ElConfigProvider } from 'element-plus'
  import zhCn from 'element-plus/lib/locale/lang/zh-cn';
</script>

• 添加router
  router.js先写的比较简单,先创建一个简单的单页面应用,同时增加一个404界面，后面慢慢补充

import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routerInfo: Array<RouteRecordRaw> = [
  {
      path: '/', name: 'Main', component: () => import('@/views/main/mainPage.vue'),
      meta: {
          title: '首界面',
          require: true
      },
      children: []
  },
  {
      //404页面
      path: '/:pathMatch(.*)', redirect: '/404'
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes: routerInfo
})


export default router

<template>
   <div class="h10"></div>
   <div  class="h30">
   </div>
   <div  class="h10">
       <el-button>你好</el-button>
   </div>
</template>
<script setup lang="ts">
  
</script>
<style scoped>
 
</style>

• 最终运行效果如下，且无报错