一、初识vue
1 将vue.js下载到本地的方式创建
- 将下载好的vue源码放在项目中
- 引入vue
- 声明要被vue控制的DOM区域
- 创建vue的配置对象
- 在配置对象中创建数据
- 创建一个应用，将配置对象传进去，并将要操作的DOM区域进行了挂载
- 在DOM区中操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1. 引入vue -->
<script src="./Vue3.js"></script>
</head>
<body>
<div id="counter">
<!-- 双大括号是告诉程序里面是一个变量 -->
<p>{
{num}}</p>
</div>
<script>
const Counter = {
//配置对象
data: function () {
return {
num: 0,
}
}
}
// 创建一个应用，将配置对象传进去 Vue.createApp(Counter)
// 将要操作的DOM区域进行了挂载 .mount('#counter')
Vue.createApp(Counter).mount('#counter')
</script>
</body>
</html>
运行结果
2 安装vue调试工具 vue-devtools
- 打开谷歌商店
- 搜索vue
- 选择beta版本的，beta版是Vue3调试工具，另一个是Vue2调试工具，不可以混用
- 对调试工具进行设置
3 使用vite安装vue
前提是需要安装Node
1. npm init vite@latest 项目名字 -- --template vue
// 可能会出现下面的对话，直接回复y即可
Need to install the following packages:
create-vite@3.2.1
Ok to proceed? (y)
2. cd 项目名称
3. npm install
4. npm run dev
输入网址进入界面
项目结构
- node_modules 是项目的依赖
- public 是静态的资源文件夹
- src是源代码
- main.js是入口文件