二、环境搭建
1.安装Node.js
下载对应操作系统的压缩包并解压到本地目录。下载地址
并在此目录中创建文件夹node_cache、node_global。
新增环境变量
NODE_HOME=D:\software\node-v16.14.0-win-x64
NODE_PATH D:\software\node-v16.14.0-win-x64\node_global
向Path环境变量添加这个两个环境变量
配置Nodejs
cmd中执行以下命令
//设置全局模块
npm config set prefix "D:\software\node-v16.14.0-win-x64\node_global"
//设置缓存
npm config set cache "D:\software\node-v16.14.0-win-x64\node_cache"2.安装VScode
下载地址
在vscode中新建终端，用于执行npm命令。
//进入到D盘根路径
cd D:
3.创建Vue项目
初始化vue项目，项目名称为vue3-hello。
$ npm init vite@latest vue3-hello -- --template vue使用vscode打开目录D:\vue3-hello
4.运行一个Vue应用程序
安装vite
//安装vite
npm install vite
运行工程
//运行vite启动工程
npm run dev通过浏览器访问 http://localhost:3000/ ，看到如下页面说明项目启动成功。
打包文件
//npm打包文件
npm run build打包后会在工程目录下新增dist文件加，dist文件加里的文件便是我们将vue应用打包成html、js、图片等静态的内容。通常这些静态文件在http服务器上就可以对外提供页面服务了。
扩展设置可以对Live server进行配置
点击“在settings.json中编辑”则可通过json的方式进行配置
点击右下角的go Live便可以运行，运行后会看到与之前通过vite运行一样的效果。
5.工程文件讲解
index.html
应用的入口文件，浏览器通过index.html作为入口来访问这个应用。
//index.html通过script标签引入main.js并执行。
<script type="module" src="/src/main.js"></script>main.js
主应用程序文件，vue应用的初始化脚本程序，包括一些模块的引用和设置。
//main.js介绍
//从Vue中导入createApp对象，用于创建vue的应用程序
import { createApp } from 'vue'
//导入一个自定义的Vue与应用（页面），并命名为APP对象。
import App from './App.vue'
//创建APP应用，并把vue渲染的html挂载到index.html的<div id="app"></div>元素中。
createApp(App).mount('#app')App.vue
Vue单页面的主应用程序。
//App.vue
//引入自定义组件HelloWorld
import HelloWorld from './components/HelloWorld.vue'
<!--App.vue文件
定义应用的html渲染模板
-->
<template>
<!-- 加载一个vue logo 的图片-->
<img alt="Vue logo" src="./assets/logo.png" />
<!-- 使用HelloWorld组件，并给组件传递一个msg的参数其值为："Hello Vue 3 + Vite" -->
<HelloWorld msg="Hello Vue 3 + Vite" />
</template>HelloWorld.vue
自定义的Vue组件，通过组件可以实现功能或页面的复用。
//HelloWorld.vue
//导入vue中的ref对象，ref可理解为此组件的引用。
import { ref } from 'vue'
//定义组件属性
defineProps({
msg: String
})
//设置一个计数变量（组件内）
const count = ref(0)
<!--
将组件属性msg绑定到h1标签上
-->
<h1>{{ msg }}</h1>
<!--
将组件中的变量count绑定到button上，设置button的onclick事件为表达式count++
-->
<button type="button" @click="count++">count is: {{ count }}</button>
