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

一、初识vue

文章目录

    • 一、初识vue
      • 1 将vue.js下载到本地的方式创建
      • 2 安装vue调试工具 vue-devtools
      • 3 使用vite安装vue
        • 项目结构

1 将vue.js下载到本地的方式创建

  1. 将下载好的vue源码放在项目中
  2. 引入vue
  3. 声明要被vue控制的DOM区域
  4. 创建vue的配置对象
  5. 在配置对象中创建数据
  6. 创建一个应用,将配置对象传进去,并将要操作的DOM区域进行了挂载
  7. 在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>Documenttitle>
    
    <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>

运行结果

Vue学习笔记-Vue项目的搭建_第1张图片

2 安装vue调试工具 vue-devtools

  1. 打开谷歌商店
  2. 搜索vue
  3. 选择beta版本的,beta版是Vue3调试工具,另一个是Vue2调试工具,不可以混用
  4. 对调试工具进行设置

Vue学习笔记-Vue项目的搭建_第2张图片

Vue学习笔记-Vue项目的搭建_第3张图片

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

Vue学习笔记-Vue项目的搭建_第4张图片

输入网址进入界面

Vue学习笔记-Vue项目的搭建_第5张图片

项目结构

Vue学习笔记-Vue项目的搭建_第6张图片

  1. node_modules 是项目的依赖
  2. public 是静态的资源文件夹
  3. src是源代码
  4. main.js是入口文件

你可能感兴趣的:(Vue,vue.js,学习,javascript)