【vue】用vite创建vue项目

  • 前置要求
    • 要有Node.js

1. 用vite创建vue项目

  • 在cmd中,进入一个文件夹
    • 在文件资源管理器上面的文件目录中,输入cmd,回车
    • 在cmd中通过cd命令进入对应文件夹

创建项目

bash 复制代码
npm create vite@latest # 创建项目

创建项目过程中的一些选项

bash 复制代码
Ok to proceed? (y) y
√ Project name: ... demo  #项目名称为demo
√ Select a framework: >> Vue   #用vue框架
√ Select a variant: >> JavaScript   #用Javascript

之后继续运行如下命令,便可运行项目

bash 复制代码
cd demo
npm install
npm run dev

之后会出现如下界面

出现下图,说明项目创建成功

项目文件如下

2. 删除不必要的文件

把文件引用也一并删除,

  • 删除App.vue中的import HelloWorld from './components/HelloWorld.vue'
  • 删除main.js中的import './style.css'

现在,该项目是一个空项目了

3. 在哪里添加内容?

删除App.vue中默认的模板内容,默认的样式

修改为如下内容

发现网页变了

4. 把已有项目导入vue中

【vue】记事本案例导入vue中

修改App.vue如下

html 复制代码
<script setup>
import { reactive } from "vue"
const data = reactive({
  content: "",
  list: ["1", "2", "3"],
})


const add = () => {
  data.list.push(data.content)
  console.log(data.list)
}

const remove = (index) => {
  data.list.splice(index, 1)
}

const clear = () => {
  data.list = []
}
</script>

<template>
  <input type="text" v-model="data.content" placeholder="输入要添加进list的内容">

  <button @click="add">添加</button>
  <p>list中的内容如下:</p>
  <ul>
    <li v-for="(item, index) in data.list" :key="index">
      <!-- 从 list 数组中移除从 index 开始的一个元素。 -->
      {{ item }}<button @click="remove(index)">删除</button>
    </li>
  </ul>
  <p>当前list的长度为:{{ data.list.length }}</p>

  <button @click="clear">清空</button>
</template>



<style lang="scss" scoped>

</style>

显示效果

参考

https://www.bilibili.com/video/BV1nV411Q7RX

相关推荐
小中123413 分钟前
异步请求的性能提升
前端
我是天龙_绍14 分钟前
渐变层生成器——直接用鼠标拖拽就可以调整渐变层的各种参数,然后可以导出为svg格式
前端
麦麦大数据37 分钟前
F024 vue+flask电影知识图谱推荐系统vue+neo4j +python实现
vue.js·python·flask·知识图谱·推荐算法·电影推荐
我是天龙_绍42 分钟前
Easing 曲线 easings.net
前端
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,电影之家小程序项目知识点详解 (17)
前端·javascript·学习·微信小程序·小程序·前端框架·vue
訾博ZiBo1 小时前
React组件复用导致的闪烁问题及通用解决方案
前端
Dever1 小时前
记一次 CORS 深水坑:开启 withCredentials 后Response headers 只剩 content-type
前端·javascript
临江仙4551 小时前
流式 Markdown 渲染在 AI 应用中的应用探秘:从原理到优雅实现
前端·vue.js
数字化顾问1 小时前
基于Spring Boot + Vue 3的乡村振兴综合服务平台架构设计与实现
vue.js·spring boot·后端
Hilaku1 小时前
为什么我开始减少逛技术社区,而是去读非技术的书?
前端·javascript·面试