Vue笔记_01

最新推荐文章于 2024-10-10 13:13:22 发布

吴世濠

最新推荐文章于 2024-10-10 13:13:22 发布

阅读量55

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/wushuhao1125/article/details/129816914

版权

文章介绍了Vue.js作为前端框架的基本特性，如数据驱动视图，以及使用Vite作为项目构建工具的流程。它提到了如何创建JavaScript和TypeScript的Vue项目，安装必要的依赖，启动开发服务器，以及如何进行项目打包上线。此外，还展示了SPA（单页应用）的简单示例和如何在控制台操作Vue实例。

摘要由CSDN通过智能技术生成

vue.js 前端框架

官方网站 https://cn.vuejs.org/

数据驱动视图
不需要像传统模式：找对象改属性

只需要修改变量的值，视图自动变化

关心数据变量即可，直接处理数据变量

第三方网站
https://vitejs.cn/

vite是vue的项目打包工具
因为vue包含了很多依赖，开发环境，将代码编译（打包发布）
vite和webpack相似

使用社区模版创建项目
https://cn.vitejs.dev/guide/

创建两个项目，分别是JavaScript项目和typeScript
npm create vite@latest my-vue-app -- --template vue

npm create vite@latest my-vue-ts-app -- --template vue-ts

安装vscode的插件
volar
TypeScript Vue Plugin (Volar)

TypeScript语法手册
https://typescript.bootcss.com/

启动vue项目
1.安装依赖
在项目根目录执行
npm i

2.启动vue开发模式
npm run dev

3.浏览器访问

如果编辑器还是代码报错，重启编辑器

vue 项目打包上线
npm run build
会在项目根目录生成
dist

打开小皮

选择网站，点击管理，选择打开根目录。

将以上打包后的3个文件复制到该根目录下，原有的index文件选择替代或复制前删除。

首页，启动

打开浏览器，搜索localhost/或则在小皮的”网站“中选择打开网站（见上图中打开根目录的步骤）。

可以打开打包好的网站，如同所示。

创建一个vue

import { createApp } from 'vue'

const app = createApp({
/* 根组件选项 */
})

在控制台可以操作app里面的变量
当变量发生改变的时候，页面视图同时发生改变
数据驱动视图
app.message=""

SPA单页应用

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<div>
	<p>普通的一段文字</p>
</div>
<div id="jq">
	
</div>
<script>
  const { createApp } = Vue
  
  const app = createApp({
    data() {
      return {
        message: 'Hello Vue!11233'
      }
    }
  }).mount('#app')
</script>

</body>
</html>

在控制台进行操作，如同所示。