企业官网建设流程全解析

创建Vue项目

#node.js环境 18.20 npm create vue@3.6.4 #npm create vue@latest

npm i

npm install相当于maven的刷新依赖，根据package.json，会生成node_module(JAR库)

env.d.ts 让IDE认识常见的 后缀文件，.ts .jpg

index.html 是入口文件

tsconfig.xxx.json 是ts的配置文件

vite.config.ts 是整个工程的配置文件 , 插件 、 代理

######################index.html############################### <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vite App</title> </head> <body> <div id="app"></div> <!-- ES模块脚本：支持import/export，模块作用域 --> <script type="module" src="/src/main.ts"></script> </body> </html>

######################main.ts############################### import './assets/main.css' import { createApp } from 'vue' //应用（花盆） import App from './App.vue' //根组件（花的根） //创建应用，并把跟根组件，放到id是#app的位置上(在index.html里) createApp(App).mount('#app')

VUE组件里可以写三种标签

<template><script lang="ts"><style>

############App.vue <template> <div class="app"> <h1>123213</h1> </div> </template> <script lang="ts"> //导出组件名称，叫做"App" export default { name :"App" } </script> <style> .app { background-color: blue; } </style>