Vue3 快速入门和模板语法

vite方式建立项目

1.安装vue vite组件

# 安装组件或更新
npm i vite vue -g

# 建立项目
npm init vue v301
cd v301
npm run dev

# 建立项目
npm create vue v302
cd v302
npm run dev

2. 配置项目vite.config.ts

import {fileURLToPath, URL} from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
    //--------------------------------- server配置
    ,server: {
        host: '0.0.0.0', //任何都可以访问 http://192.168.13.249
        port: 80,//端口号80
        open: true,//自动打开浏览器查看效果
        proxy: { // 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
            '/api': {//此处前缀/api必须有前缀 axios.defaults.baseURL = '/api'
			     target: 'http://localhost:8080', 
                //后端服务实际地址http://localhost:8080/dbs
                //http://localhost/api/dbs 代理http://localhost:8080/dbs
                changeOrigin: true, //开启代理
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    }
    //-----------------------------------
})

 3.启动程序

#npm run dev

idea 配置npm 执行 npm run dev

项目结构介绍

public/favicon.ico 项目站标

/index.html 入口网页,可以修改项目的默认标题

/src 项目源码目录

/src/App.vue 入口显示的组件

项目入口

/src/main.js 项目入口脚本

import { createApp } from 'vue'

//导入组件
import App from './App.vue'

//引入全局样式
import './assets/main.css'

createApp(App).mount('#app')

项目vite自动打开

项目 vite.config.js自动打开，端口号使用80 http://192.168.13.249/

import {fileURLToPath, URL} from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    server: {
        host: '0.0.0.0', //任何主机 查看项目 http://192.168.13.249
        port: 80, //端口号为 80
        open: true, //启动服务时自动打开项目入口首页
    }
})

入口显示

src/App.vue 入口显示的组件

<script setup>
import {ref, version,onMounted} from 'vue'

//响应式数据对象
const timer = ref()

onMounted(()=>{
  setInterval(()=>{
    let d = new Date()
    timer.value = d.toLocaleTimeString()
  },1000)
})

</script>

<template>
  <h3>hello world 中文效果</h3>
  <p>{{ version }}</p>
  <p>{{ timer }}</p>
</template>

<style scoped>

</style>

node -v
npm -v
npm i npm -g
npm i vue vite -g

#建立项目
npm create vue app
cd app
npm install
#开发测试运行项目，
npm run dev

#打包项目 到dist目录
npm run build