一、使用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

第四步：进入项目目录，安装依赖

cd
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>
		
1
2
3
4
5
6
7
8
9
10
11
12
13
14

☀️举个例子：
Demo.vue代码段:

<template>
<div id="d1">{{ info }}div>
  <div>{{ count }}div>
  <button type="button" @click="add">Addbutton>
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

App.vue代码段：

<script setup>
// This starter template is using Vue 3 
 
 
☀️举个例子：
 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">Addbutton>
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
App.vue代码段：
 
<script setup>
// This starter template is using Vue 3