vue不正经指南

vue不正经指南

环境配置

shell 复制代码
asdf plugin add nodejs
asdf install nodejs 16.20.2

创建项目

shell 复制代码
npm create vite@latest my-vue-app -- --template vue
npm install 
npm run dev

修改调试端口

修改vite.config.js,修改如下所示,添加server的host和port。

js 复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    host: '0.0.0.0',
    port: 3000 // 设置 Vite 服务器监听的端口
  }
})

项目结构

  • index.html

项目入口是index.html,里面有一个app的div,就是vue里面的app,这个app指定了要运行的js入口,也就是main.js。

html 复制代码
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

这个html里的内容也是可以更改的,比如这里的 标签里的内容。

  • main,js

在index.html里指定入口是main.js后,就会在main.js里初始化vue相关的东西。

js 复制代码
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

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

在这个文件里主要是把vue接口导入进来,以及导入css,然后导入App.vue,到这里入口传到到App.vue。

main.js会将vue框架mount到界面。这些一般都不需要更改,除非需要引入其他的东西。

  • App.vue

App.vue就是vue的核心开发文件,这里就是整个页面的展示,对于单页面应用来说,这个就是页面对应的代码。

shell 复制代码
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld msg="anycode开发环境" />
</template>

vue采用组件化和模板化来开发,在开头可以引入其他的组件,这个一般是封装好的组件,放在components目录下。

比如上面的例子中就导入了HelloWorld这个组件。

然后对于这个App来说,有一个模板,这个template可以简单理解为页面的body。

然后里面会显示HelloWorld这个组件,这个时候控制权就到了./components/HelloWorld.vue。

app.vue给它传了一个msg的参数。

  • ./components/HelloWorld.vue
vue 复制代码
<script setup>
defineProps({
  msg: String,
})
</script>

<template>
  <h1>{{ msg }}</h1>
  <p>
    hello,anycode.
  </p>
</template>
相关推荐
前端小巷子4 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹8 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器14 分钟前
指定阿里镜像原理
前端
枷锁—sha19 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha20 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜36 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss