Vue3开发教程（二、环境搭建）

 二、环境搭建

1.安装Node.js

下载对应操作系统的压缩包并解压到本地目录。下载地址
并在此目录中创建文件夹node_cache、node_global。

笔者的目录:D:\software\node-v16.14.0-win-x64

新增环境变量

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后我们通过VSCode刷新工程目录，发现多了node_modules目录。这个目录就是项目运行依赖的模块，我们看到了vite和vue向模块以被载入，因此对与这个项目我们不要再安装vue了，也说明了vite的安装包依赖的vue。

 

运行工程

//运行vite启动工程
npm run dev

 通过浏览器访问 http://localhost:3000/ ，看到如下页面说明项目启动成功。

 

打包文件

//npm打包文件
npm run build

打包后会在工程目录下新增dist文件加，dist文件加里的文件便是我们将vue应用打包成html、js、图片等静态的内容。通常这些静态文件在http服务器上就可以对外提供页面服务了。

提示：vscode安装Live server插件就可以启动一个httpserver来运行我们的dist中的内容

扩展设置可以对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>