目录
一、使用Vue脚手架(vue-cli)构建Vue项目
打开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上
二、使用Vite构建工具构建Vue项目
第一步:先打开你要创建项目所要存放的位置:
第二步:在你要创建项目的文件夹,用如下方法将该位置用cmd窗口打开:
第三步:进入工作目录执行以下指令:
npm init vite-app <project-name>
第四步:进入项目目录,安装依赖
cd <project name>
npm install
第五步:启动项目
npm run dev
三、WebStorm中创建Vue项目(使用Vite构建工具)
1、在WebStorm中安装vite插件
2、使用vite创建Vue项目
3、配置npm运行环境
4、创建组件:
<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>
5、Vue3中新增的特性:
(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>