Vue3的安装脚手架

vue3安装：1 @vue/cli全局安装@vue/clicnpm i @vue/cli -g创建项目vue create 项目名2 vite安装vitecnpm init vite@latest进入项目cd 项目名cnpm icnpm run devvue3语法数据插值使用{{变量或者常量}}格式：<script setUp>const a=123</script>{{a}}想要修改数据 有两种形式需要使用组合式api里边相关的方法ref 修改或者获取基本数据类型import {ref} from 'vue'const a=ref(123)const 事件名=()=> {a.value=新值}reactive 修改或者获取引用类型 或者是比较复杂的数据类型import {reactive} from 'vue'const arr=reactive([1,2,3])const 事件名=()=> {arr[0]=新值}vue3引入axios局部引入安装axioscnpm i axios --save-dev在使用的组件中 引入axiosimport axios from 'axios'axios.get()axios.post()vue3路由配置安装vue-routernpm install vue-router@4 --save-dev需要在根目录创建router文件 里边创建index.js文件import {createRouter, createWebHistory} from 'vue-router'import 组件 from '路径'const routes=[{path: '',name: '',component: 组件}]const router=createRouter({history: createWebHistory(),routes})export default router在main.js文件中引入router 并且调用routerimport router from '路径'createApp("").use(router).mount("")vue3获取路由组件传值有两种1 以问号形式传值  获取参数使用queryimport {useRoute} from 'vue-router'const $route=useRoute()console.log($route.query.属性名)2 以斜杠形式传值  获取参数使用paramsimport {useRoute} from 'vue-router'const $route=useRoute()console.log($route.params.属性名)vue3使用编程式导航1 引入useRouterimport {useRouter} from 'vue-router'2 调用router 实现编程式导航const $router=useRouter()const 方法名=()=> {$router.push({name: 'name名'})$router.push({path: 'path路径'})$router.push({path: 'path路径',params: {id：123}})  // /path/123$router.push({path: 'path路径',query: {id: 123}})  // /path?id=123}vue3组件传值父组件向子组件1 在子组件中使用defineProps来定义propsdefineProps({自定义数据: {type: 数据类型,default: 默认值}})2 在父组件中找到子组件标签 在子组件标签上使用v-bind:自定义数据="要发送的数据"子组件向父组件1 在子组件中定义事件 使用defineEmits来发送数据<button @click="事件"></button>const emit=defineEmits(['方法名1','方法名2', ...])const 事件=()=> {emit('方法名1',要传递参数)emit('方法名2',要传递参数)...}2 在父组件中找到子组件标签 在子组件标签上使用@方法名1="新的方法名"<子组件标签 @方法名1="新的方法名"></子组件标签>const 新的方法名=(data)=> {console.log(data)// data就是子组件传递过来的数据}非父子组件1 安装mitt插件 cnpm i mitt --save-dev2 创建bus.js文件  import mitt from 'mitt'const bus=mitt()export default bus3 在需要发送数据的组件 使用bus.emit发送数据 import bus from '路径'const 事件=()=> {bus.emit('新的方法名', 要发送的数据)}4 在需要接受数据的组件中 使用bus.on接受数据import bus from '路径'bus.on('新的方法名', (data)=> {console.log(data)// data就是传递过来的数据})vue3中provide inject使用场景：可以实现非父子组件传值(父组件的父组件想要给你子组件传值)1 在需要发送数据组件中 使用provide('自定义属性名',要发送的数据)import {provide} from 'vue'provide('自定义属性名',要发送的数据)2 在需要接受数据的子组件中 使用inject('自定义属性名')来获取数据import {inject} from 'vue'inject('自定义属性名')  // 该值就是发送过来的数据注意：使用provide和inject只能实现自上而下组件数据传值  这个值的传递是不可逆vue3中watch数据监听格式：  import {watch} from 'vue'// 第一个参数 如果直接写的是数据  代表当前的数据 为基本数据类型中数据watch(被监听的数据, (val, oldVal)=> {console.log(val, oldVal)   // 新值  老值},{immediate: true, deep: true})// immediate 是否立即执行数据监听// deep  是否对嵌套过身的数据 进行深度监听// 如果第一个参数监听的为对象  则第一个参数应付写为 函数形式  const obj={name: '111'}watch(()=> obj.name, (val, oldVal)=> {console.log(val, oldVal)   // 新值  老值},{immediate: true, deep: true})// immediate 是否立即执行数据监听// deep  是否对嵌套过身的数据 进行深度监听// 如果监听数据有多个watch([数据1，数据2], ([数据1新值, 数据2新值],[数据1老值, 数据2老值])=> {console.log(数据1新值, 数据2新值)console.log(数据1老值, 数据2老值)})vue3 computed计算属性当函数表达式比较复杂的时候我们可以使用格式：  import {computed} from 'vue'const msg='hello'// 推荐使用const 常量名=computed(()=> {return 计算方法})常量名直接当作data来进行使用对象   了解const 常量名=computed({get: ()=> {return 计算方法},set: (val)=> {msg.value=val}})console.log(常量名)  // 相当于执行get方法常量名.value=新值  // set val等价新值console.log(常量名.value) // 相当于执行到了set方法https://www.imooc.com/learn/861

Vue3的安装脚手架相关推荐

Vue3基础安装教程
VUE3安装网址:https://vue3js.cn/(这个不是官网,是由国内Vue爱好者共同搭建) 全局安装脚手架:npm i @vue/cli -g vue create 项目名称 (这个的意思 ...
2021-10-27 Vue安装脚手架npm install -g @vue/cli命令失败_因为文件已存在
这里写自定义目录标题 Vue安装脚手架npm install -g @vue/cli命令失败_因为文件已存在 Vue安装脚手架npm install -g @vue/cli命令失败_因为文件已存在 1 ...
Html第1集：WebStorm 安装、vue3.0 安装、npm安装
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/126379205 本文出自[赵彦军的博客] 文章目录 WebStorm vue3.0 ...
vue-cli脚手架Vue2.x与Vue3.x安装与预设
一.vue安装 (1)cdn:使用html写法的时候可以直接引入,虽然引用起来非常的方便,一旦官方修改内容有可能影响项目部分功能. <script src="https://unpkg ...
Vue3.0 安装流程
1.确定node 版本 2.确定 npm 版本 3.安装 vue3.0 npm install -g @vue/cli 4. 查看 vue脚手架的版本 vue -V 5. 创建项目 vue creat ...
vue3+vuetify安装
vue3+vuetify的安装一.安装nodejs+npn 二.使用vite创建工程 1.创建工程 2.安装vue-cli 3.添加vuetify库 4.安装vue-router 5.启动 6.打开 ...
vue3 webpack5 安装时报错 App.vue:2 Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.createEleme
在 webpack 配置vue3 element plus 的时候报错你可能安装了局部的 vue 或者 vue-loader 的版本低于16 解决方案 npm i vue-loader@next ...
vue篇之安装脚手架以及创建项目
1.安装node node -v 查看node版本 npm -v 查看npm版本 npm inst ...
Vue3 devtool 安装
Vue devtool(开发环境用) 安装 vue devtool 是chrome 里面的插件,支持Vue3的版本安装6.0.0.beta15 可以翻墙的话直接去扩展商店安装 github 上搜索vu ...

Vue3的安装脚手架

Vue3的安装脚手架相关推荐

最新文章

热门文章