详细介绍：Vue3 创建

文章目录

前言
创建Vue3
一、搭建Vue-Cli脚手架
二、基于 vite 创建（推荐）
三、编写APP组件

前言

提示：这里可以添加本文要记录的大概内容：

Vue CLI是一个基于 Node.js 的脚手架工具，可以快速构建 Vue.js 项目的命令行工具。它集成了很多常用的工具和插件，比如 Babel、Webpack、ESLint 等，可以帮助我们创建和开发 Vue.js 项目。

脚手架是一个用于快速搭建项目结构的工具，它可以根据项目需求生成文件和目录结构等基础代码。Vue CLI 就是一个基于脚手架的工具，它可以帮助我们快速搭建一个 Vue.js 项目的基础结构，包括目录结构、配置文件等。

Vue CLI 是一种基于脚手架的工具，可以帮助我们快速构建和开发 Vue.js 项目。

创建Vue3

在这里插入图片描述

main.ts代码：
createApp就像是花盆，App是组件，就像根
createApp(App) 把花插在花盆里，.mount('#app')把花盆摆在哪个位置

一、搭建Vue-Cli脚手架

安装npm

先下载Node.js ，然后傻瓜式安装
提示：以下是本篇文章正文内容，下面案例可供参考

Ctrl+反引号建打开终端（ESC下面键）
输入：npm
在这里插入图片描述

可能出现的报错及解决办法

①、如果是权限问题用管理员打开：
在这里插入图片描述
再打开终端输入npm

②、如果是以下报错：
在这里插入图片描述
在电脑下面的搜索框中搜索pwe，打开Windows PowerShell

输入：

set-ExecutionPolicy RemoteSigned

选择是输入 y
在这里插入图片描述
最后再次以管理员身份运行VS Code

回到VS Code再次运行npm

国内淘宝镜像服务器

加速 NPM 包的下载和安装，提高开发效率

避免由于原始 NPM 源的不稳定性导致的下载和安装失败

避免由于境内外网络访问的限制、封锁等问题导致的访问速度缓慢或无法下载 NPM 包的问题

首先复制下面代码：（还有这个镜像源可能会快一些：npm config set registry http://registry.npmmirror.com）

npm config set registry https://registry.npm.taobao.org

复制然后到VS Code终端右键（右键就是粘贴）

怎么知道成没成功？
输入：

npm config get registry

当显示https://registry.npm.taobao.org链接的时候即为成功
在这里插入图片描述

全局安装 vue-cli

目的：在任何目录下都可以使用脚手架工具

安装最新@vue/cli版本：

npm i -g @vue/cli

在这里插入图片描述
查看版本号：

vue -V

在这里插入图片描述

创建 Vue-Cli工程

Ctrl+反引号建打开终端（ESC下面键）

用cd切换路径命令选择要进入的文件夹

输入命名创建一个名为 test 的 Vue.js 项目，test 是工程名（注意：工程名必须全部小写）

vue create test

回车后选择（向下箭头选择）最后一个（自定义）
在这里插入图片描述

再次点击回车后：按空格键取消( * ) Linter / Formatter
在这里插入图片描述

再次回车后：默认选中3.x
在这里插入图片描述

回车后选择第二项：
在这里插入图片描述

最后一项输入n，不保存
在这里插入图片描述

再点回车创建项目
在这里插入图片描述

项目创建完成：
在这里插入图片描述

随后输入提示的命令
在这里插入图片描述

回车后显示的页面：显示成功启动
通过下面的两个地址可以访问项目
在这里插入图片描述

Ctrl+左键单击访问
在这里插入图片描述
停止项目访问：Ctrl+c

再次访问首先cd到要访问的文件夹（项目）下输入命令：

npm run serve

Ctrl+反引号是关闭或打开终端

打开项目：
在这里插入图片描述

其中根组件App.vue文件是核心由三部分组成：

template：写的是HTML
script：写的是动态脚本JS
style：写的是样式CSS

下面在根组件App.vue文件中改一下东西：

在template标签删掉HelloWorld标签并中加入：

<h1>App.vue是根组件{{ name }}</h1>

在script标签中加入：

data() {
return {
name: '，你好'
}
},

在style标签中加入：

h1{
background-color: pink;
}

最后打开终端：
在这里插入图片描述

创建 Vue 的基本模板

文件→首选项→配置用户代码片段
在这里插入图片描述
搜索vue.json文件
如果没有就新建全局代码片段文件，输入框中输入vue新建一个

要么就选择全局回车
在这里插入图片描述
然后在打开的页面中的大片注释内容及其大括号全部（Ctrl+a）删掉，把下面代码全部粘贴上去

{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
  " <div>",
  " </div>",
"</template>",
"",
"<script>",
  "export default {",
  " data () {",
  " return {",
  "",
  " }",
  " },",
  " methods: {",
  "",
  " },",
  " components: {},",
  " computed: {},",
  " watch: {},",
  " mounted () {}",
  "}",
"</script>",
"<style scoped>",
"</style>"
],
"description": "Log output to console"
}

可以通过在 Visual Studio Code 的编辑器中键入 “vue”，然后按下回车键来使用该代码片段

等下次无论是创建子组件还是自带的父组件，都可以用vue重新生成

总结

终端打开/关闭操作

Ctrl+反引号只是关闭了终端页面，启动的服务还是存在
Ctrl+c关闭了终端并不是关闭了

创建Vue-Cli工程过程

请添加图片描述
一般来讲会删掉HelloWorld.vue文件，删掉App.vue中所有代码，然后输入vue重新生成（无论父子组件）

二、基于 vite 创建（推荐）

vite 是新一代前端构建工具，官网地址，vite的优势如下：

轻量快速的热重载(HMR)，能实现极速的服务启动

对 Typescript 、JSX、css 等支持开箱即用

真正的按需编译，不再等待整个应用编译完成

首先电脑要具备Node.js环境，如果不安装是没有npm命令的

# 创建命令
npm create vue@latest
# 具体配置配置项目名称
Project name: vue3-test
# 是否添加`Typescript`支持
Add TypeScript? Yes
# 剩下全是 NO
# 然后最后安装依赖：
npm install

点击详情查看

三、编写APP组件

<template>
  <
  !-- html 结构-->
  <div class=
  "app">
  <h1>你好啊！<
    /h1>
    <
    /div>
    <
    /template>
    <script lang="ts">
      // JS或TS 交互
      export default {
      name: "App", // 组件名
      data() {
      return {
      };
      },
      methods: {
      },
      };
      <
      /script>
      <style>
        /* 样式 */
        .app {
        color: red;
        }
        <
        /style>

在这里插入图片描述
总结：
vite 项目中，index.html 是项目的入口文件，在项目最外层。
加载 index.html后，Vite 解析<script type="module” src="xxx">指向的 Javascript
Vue3 中是通过createApp函数创建一个应用实例。

posted @ 2025-08-11 17:03 wzzkaifa 阅读(3) 评论(0) 收藏举报

刷新页面返回顶部

wzzkaifa