创建 Vue3 工程

创建 Vue3 工程

1.【基于 vue-cli 创建】

官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

备注：目前 vue-cli 已处于维护模式，官方推荐基于 Vite 创建项目。

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version

## 安装或者升级你的@vue/cli 
npm install -g @vue/cli

## 执行创建命令
vue create vue_test

##  随后选择3.x
##  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
##  > 3.x
##    2.x

## 启动
cd vue_test
npm run serve

2【基于 vite 创建】（推荐）

官网网站：https://vitejs.cn

2.1 vite 是新一代前端构建工具，vite 的优势如下：

• 轻量快速的热重载（HMR），能实现极速的服务启动。
• 对 TypeScript、JSX、CSS 等支持开箱即用。
• 真正的按需编译，不再等待整个应用编译完成。

2.2 webpack构建 与 vite构建对比图如下：

webpack 模式：

vite 模式：

2.3 操作步骤

官方文档：https://cn.vuejs.org/guide/quick-start#creating-a-vue-application

## 1.创建命令
npm create vue@latest

## 2.具体配置
## 配置项目名称
√ Project name: vue3_demo
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No
## 是否添加pinia环境
√ Add Pinia for state management?  No
## 是否添加单元测试
√ Add Vitest for Unit Testing?  No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? >> No
## 是否添加ESLint语法检查
√ Add ESLint for code quality?  Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No

## 3、安装扩展
npm install

## 4、启动
npm run dev

2.4 总结

• Vite 项目中，index.html 是项目的入口文件，在项目最外层。
• 加载 index.html 后，Vite 解析 <script type="module" src="xxx"> 指向的 JavaScript。
• Vue3 中是通过 createApp 函数创建一个应用实例。

3 、【一个简单的效果】

Vue3 向下兼容 Vue2 语法，且 Vue3 中的模板中可以没有根标签。

App.vue

<template>
  <div class="app">
    <h2>我是根节点</h2>
    <Person/>
  </div>
</template>

<script lang="ts">
import Person from './components/Person.vue';

export default{
  name:'App',
  components:{
    Person
  }
}
</script>

<style>
.app{
  background-color: #ccc;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>

components/Person.vue

<template>
  <div class="person">
    <h2>姓名：{{name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="chanageAge">年龄自增</button>
    <button @click="showPhone">查看联系方式</button>
  </div>
</template>

<script lang="ts">
export default
{
  name:'Person',
  data(){
    return {
      name:'张三',
      age:10,
      phone:"13612341234"
    }
  },
  methods:{
    changeName(){
      this.name = 'jason'
    },

    chanageAge(){
      this.age += 1
    },

    showPhone(){
      alert(this.phone)
    }
  }
}
</script>

<style scoped>
.person{
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>

测试：