Vue学习笔记-Vue项目的搭建

Vue学习笔记-Vue项目的搭建 2023-11-20 300

一、初识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

输入网址进入界面