Vue3 创建 - 技术栈

文章目录

前言
创建Vue3
一、搭建Vue-Cli脚手架
- 安装npm
- - 可能出现的报错及解决办法
  - 国内淘宝镜像服务器
- [全局安装 vue-cli](#全局安装 vue-cli)
- [创建 Vue-Cli工程](#创建 Vue-Cli工程)
- [创建 Vue 的基本模板](#创建 Vue 的基本模板)
- 总结
- - 终端打开/关闭操作
  - 创建Vue-Cli工程过程
[二、基于 vite 创建（推荐）](#二、基于 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

输入：

javascript 复制代码

set-ExecutionPolicy RemoteSigned

选择是输入 y

最后再次以管理员身份运行VS Code

回到VS Code再次运行npm

国内淘宝镜像服务器

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

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

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

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

javascript 复制代码

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

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

怎么知道成没成功？

输入：

javascript 复制代码

npm config get registry

当显示https://registry.npm.taobao.org链接的时候即为成功

全局安装 vue-cli

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

安装最新@vue/cli版本：

javascript 复制代码

npm i -g @vue/cli

查看版本号：

javascript 复制代码

vue -V

创建 Vue-Cli工程

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

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

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

html 复制代码

vue create test

回车后选择（向下箭头选择）最后一个（自定义）

再次点击回车后：按空格键取消( * ) Linter / Formatter

再次回车后：默认选中3.x

回车后选择第二项：

最后一项输入n，不保存

再点回车创建项目

项目创建完成：

随后输入提示的命令

回车后显示的页面：显示成功启动

通过下面的两个地址可以访问项目

Ctrl+左键单击访问

停止项目访问：Ctrl+c

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

javascript 复制代码

npm run serve

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

打开项目：

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

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

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

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

html 复制代码

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

在script标签中加入：

javascript 复制代码

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

在style标签中加入：

css 复制代码

h1{
  background-color: pink;
}

最后打开终端：

创建 Vue 的基本模板

文件→首选项→配置用户代码片段

搜索vue.json文件

如果没有就新建全局代码片段文件，输入框中输入vue新建一个

要么就选择全局回车

然后在打开的页面中的大片注释内容及其大括号全部（Ctrl+a）删掉，把下面代码全部粘贴上去

javascript 复制代码

{
	"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命令的

bash 复制代码

# 创建命令
npm create vue@latest

# 具体配置配置项目名称
Project name: vue3-test

# 是否添加`Typescript`支持
Add TypeScript? Yes

# 剩下全是 NO

# 然后最后安装依赖：
npm install

点击详情查看

三、编写APP组件

javascript 复制代码

<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函数创建一个应用实例。