YiJian数字花园
Search K

主题切换

使用 vue-cli 创建 ​

查看官方文档：官方文档

注意

vue-cli 已处于维护模式，官网推荐基于 vite 构建项目！

提示

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

vue --version

安装或者升级你的@vue/cli

npm install -g @vue/cli

使用 vue-cli 创建项目

vue create +项目名称 例如：vue create vue_test

启动项目

cd vue_test

npm run serve

基于 vite 构建（推荐） ​

Vite 是一个超快的前端构建工具，赋能下一代 Web 应用的发展。

vite 官网：https://cn.vite.dev

优势如下：

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

Vite

Vite

构建与 构建对比图

Vite

Vite

具体操作如下（点击查看官方文档）

提示

创建工程

  • npm create vite@latest

进入工程目录

  • cd <project-name>

安装依赖

  • npm install

运行项目

  • npm run dev
  1. 创建命令
  • npm create vue@latest
  1. 具体配置
  • 配置项目名称

🚀Project name：vue3_test

  • 是否添加 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

分析工程结构 ​

分析工程结构

Vue3+TS 版本

Vue3+TS版本

安装官方推荐的 vscode 插件：

Vue官方推荐插件

总结

  • Vite 项目中，index.html 是项目的入口文件，在项目最外层。

  • 加载 index.html 后，Vite 解析<script type="module" src="xxx">指向的 JavaScript。

  • Vue3 中是函数创建一个应用实例。

一个简单的效果 ​

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

vue
<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script lang="ts">
export default {
  name: "App",
  data() {
    return {
      name: "张三",
      age: 18,
      tel: "13888888888",
    };
  },
  methods: {
    changeName() {
      this.name = "zhang-san";
    },
    changeAge() {
      this.age += 1;
    },
    showTel() {
      alert(this.tel);
    },
  },
};
</script>