赞
踩
打开cmd窗口:
1、安装或升级脚手架
npm install -g @vue/cli
2、进入工作目录创建Vue项目
vue create 项目名称
3、进入项目目录,启动项目
npm run serve
4、项目目录:
(1)public目录:静态资源文件夹.index.html是vue项目启动的首页
(2)src目录:源码文件夹
① assets目录:静态资源、测试数据
② components目录:存放Vue组件(组件扩展名是.vue)
③ App.vue组件:主组件(启动组件)
④main.js文件:核心文件。使用App.vue创建Vue组件,将该组件挂载到index.html的div上
第一步:先打开你要创建项目所要存放的位置:
第二步:在你要创建项目的文件夹,用如下方法将该位置用cmd窗口打开:
第三步:进入工作目录执行以下指令:
npm init vite-app <project-name>
第四步:进入项目目录,安装依赖
cd <project name>
npm install
第五步:启动项目
npm run dev
<template> -- html标签(页面显示的内容)
</template>
<script> -- 动态的脚本(数据、方法、计算属性...)
export default {
name: "Demo"
}
</script>
<style scoped> -- CSS样式。scoped表示样式的应用范围在当前组件
</style>
☀️举个例子:
Demo.vue代码段:
<template> <div id="d1">{{ info }}</div> <div>{{ count }}</div> <button type="button" @click="add">Add</button> </template> <script> export default { name: "Demo", data(){ return { info:'西安邮电大学', count:0 } }, methods:{ add(){ this.count++ } } } </script> <style scoped> #d1{ color:red; font-size:25px; } </style>
App.vue代码段:
<script setup> // This starter template is using Vue 3 <script setup> SFCs // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup import Demo from './components/Demo.vue' </script> <template> <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /> <Demo/> </template> <style scoped> .logo { height: 6em; padding: 1.5em; will-change: filter; } .logo:hover { filter: drop-shadow(0 0 2em #646cffaa); } .logo.vue:hover { filter: drop-shadow(0 0 2em #42b883aa); } </style>
(1)组合式API:setup
a、是一个函数,可以返回对象,对象的属性和方法可以在模板中直接使用
b、所有的组合API函数都在此使用, 只在初始化时执行一次
(2)初始化函数:ref。作用是初始化组件中使用的变量。语法是:
const 变量名 = ref(初始值)
(3)构建响应式数据方法:reactive。作用是将数据打包成对象
(4)Vue3的计算属性:
(5)Vue3的setup语法糖:不需要使用exports default进行组件的默认导出
<script setup>
</script>
☀️举个例子:
Demo.vue代码段如下:
<template> <div id="d1">{{ info }}</div> <div>{{ count }}</div> <h2>姓名:{{ obj.name }}</h2> <h2>性别:{{ obj.gender }}</h2> <h2>年龄:{{ obj.age }}</h2> <h2>家属:{{ obj.wife }}</h2> <button type="button" @click="add">Add</button> </template> <script> import {reactive, ref} from 'vue'; export default { name: "Demo", setup(){ const count = ref(0) const info = ref('西安邮电大学') const obj = reactive({ name: '刘备', gender: '男', age: 36, wife: { name: '栾夫人', age: 23 } }) function add(){ count.value = count.value + 1 } return{ info, count, obj, add } } } </script> <style scoped> #d1{ color:red; font-size:25px; } </style>
App.vue代码段:
<script setup> // This starter template is using Vue 3 <script setup> SFCs // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup import Demo from './components/Demo.vue' </script> <template> <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /> <Demo/> </template> <style scoped> .logo { height: 6em; padding: 1.5em; will-change: filter; } .logo:hover { filter: drop-shadow(0 0 2em #646cffaa); } .logo.vue:hover { filter: drop-shadow(0 0 2em #42b883aa); } </style>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。