Vue3精简版
1.vue31.1 vue3认识vue3提供了更好的性能,更小的捆绑包体积,更好的TypeScript集成,用于处理大规模用例的新的API
(1)vue3比vue2更快
(2)vue3加入typescript的支持
(3)vue3没有beforecreate,created ,用setup取代
(4)vue3的组合式API和vue2的选项式API同时存在
1234567891011121314151617181920212223242526export default{ data(){ return{} }, methods:{} computed:{} watch:{}}-----------------------------------------------------------------------------------------<script setup> import { ref, on ...
Vue3详细版
简介
vue3简介 https://github.com/vuejs/vue-next/releases/tag/v3.0.0
使用vue-cli创建工程
官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
12345678910111213141516## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上vue --version## 或者使用vue -V## 安装或者升级你的@vue/clinpm install -g @vue/cli## 创建vue create vue3_test# 勾选vue3, 选择npm## 启动cd vue3_testnpm run serve
显示Successfully created project vue3_test.说明安装成功了
启动脚手架
页面效果
使用vite创建工程
官方文档:https://v3.cn.vuejs.org/guide/installation.html#vitevite官网:https://vitejs ...
Vue2脚手架
创建脚手架121. 如出现下载缓慢请配置 npm 淘宝镜像:npm config set registry https://registry.npm.taobao.org
脚手架官网https://cli.vuejs.org/zh/具体步骤: 第一步(仅第一次执行):全局安装@vue/cli。
1npm install -g @vue/cli
第二步:切换到你要创建项目的目录,然后使用命令创建项目
1vue create xxxx
第三步:启动项目
1npm run serve
访问http://localhost:8080/, 可以看见脚手架为我们默认创建一个HelloWorld组件
脚手架文件结构
12345678910111213141516├── node_modules ├── public│ ├── favicon.ico: 页签图标│ └── index.html: 主页面├── src│ ├── assets: 存放静态资源│ │ └── logo.png│ │── component: 存放组件│ │ └── Hello ...
Vue2基础
Vue的安装在vue的官网中下载vue.js安装 — Vue.jsvue.js一般使用在开发环境中, vue.min.js一般使用在生产环境中
然后创建一个.html文件, 在页面上运行
12345678910111213<!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>初始Vue</title> <script src="../js/vue.js"></script> ...
我的第一篇博客文章
我的第一篇博客这是刚刚用命令创建出来的一篇博客
外挂标签
test1 1test1 2test1 3This is Tab 1.This is Tab 2.This is Tab 3.