Vue学习笔记-Vue项目的搭建
一、初识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是入口文件
上一篇:
通过多线程提高代码的执行效率例子