当前位置：首页 > news >正文

实用指南：Vue开发准备

news 2026/6/12 12:48:16

实用指南：Vue开发准备

vs code

VSCode的下载地址https://code.visualstudio.com/Download

Node.js

node.js的下载地址 https://nodejs.org/zh-cn/download

注意：nodejs安装路径不要和vscode安装到同一个文件夹，两个应用分别装到两个不同的文件夹

npm config set cache "D:\runSoft\nodejs\node_cache"
npm config set prefix "D:\runSoft\nodejs\node_global"

设置nodejs prefix（全局）和cache（缓存）路径，把npm安装的模块集中在一起，便于管理。

npm与cnpm

npm是Nodejs自带的包管理器，当你安装Node的时候就自动安装了npm。

npm是目前世界上生态最丰富，可用模块最多的一个社区。

安装npm后，每次安装包时，我们的电脑都要和npm服务器进行对话，去npm仓库获取包。

npm的远程服务器在国外，下载访问不稳定。

cnpm位国内淘宝镜像，每隔10分钟将国外npm仓库的所有内容“搬运”回国内的服务器上。响应较稳定。

cnpm安装方法如下：

npm install -g cnpm --registry=https://registry.npm.taobao.org

如果执行报错，参考下面文章解决cnpm安装报错

环境安装调试https://blog.csdn.net/m0_74824877/article/details/145867408

清除npm缓存的方式

npm cache clean --force //常用
npm cache verify //新版本方式

创建Vue3工程

点击查看官方文档

备注：目前vue-cli已处于维护模式，官方推荐基于 Vite 创建项目。

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli 
npm install -g @vue/cli
## 执行创建命令
vue create vue_test
## 随后选择3.x
## Choose a version of Vue.js that you want to start the project with (Use arrow keys)
## > 3.x
## 2.x
## 启动
cd vue_test
npm run serve

基于 vite 创建

vite 是新一代前端构建工具，官网地址：https://vitejs.cn，vite的优势如下：

## 1.创建命令
npm create vue@latest
## 2.具体配置
## 配置项目名称
√ 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

自己动手编写一个App组件

<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 setup>import { ref} from 'vue'const name = ref('张三')const age = ref(18)const changeName = () =>{name.value = '李四'}const changeAge = () =>{age.value++}const showTel = () =>{alert('13212312312')}</script>

安装官方推荐的vscode插件：

总结：

Vite 项目中，index.html 是项目的入口文件，在项目最外层。
加载index.html后，Vite 解析 <script type="module" src="xxx"> 指向的JavaScript。
Vue3**中是通过 **createApp 函数创建一个应用实例。

如何确认项目类型

检查项目依赖：

- 如果 package.json 中有 vite，说明项目是基于 Vite 的。
- 如果有 @vue/cli-service，说明项目是基于 Vue CLI 的。

检查配置文件：

- 如果项目有 vite.config.js，说明是 Vite 项目。
- 如果项目有 vue.config.js，说明是 Vue CLI 项目。
vue项目结构解析
项目结构解析
.vscode --VSCode工具的配置文件夹
node_modules —Vue项目的运行依赖文件夹
public 资源文件夹
index.html: 入口html文件
src 源码文件夹
**main.js:**项目入口文件，webpack编译打包就是从此文件开始，换言之，所有你用到的资源，都应该从这里面import引入，才能被打包进项目。最终打包的js文件会自动插入到index.html页面中
**App.vue:**默认入口组件，它的vm实例控制的就是index.html中的div区域.
.gitignore git忽略文件
package.json 项目信息描述文件，包括依赖包列表，当拷贝项目源码时，要忽略node-modules目录的，其他人要重新安装项目依赖，执行npm I, 会根据package.json中指定的依赖列表自动安装到当前项目目录的node-modules
其中的scripts
“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”
},

build：对应终端下输入的npm run build命令，实际执行vue-cli-service build命令，表示执行正式环境的编译打包，会生成dist目录，因为此命令是启用内置webpack进行资源编译打包输出。
lint：对应npm run lint命令, 启用eslint插件进行语法检查，不会启动项目，也不会编译项目，如果js语法不符合规范，控制台会抛出异常。
readme.md ：注释说明
vite.config.js Vue配置文件

安装Vue调试工具【Vue.js Devtools】

1、百度搜索极简插件

2、点击搜索

在这里插入图片描述

3、输入vue，点击搜索

在这里插入图片描述

解压后的软件

在这里插入图片描述

打开开发者模式

在这里插入图片描述

固定扩展组件

在这里插入图片描述

右键“检查”，或者直接Fn+F12快捷键。

在这里插入图片描述

常见问题

1，npm -v 不是内部或者外部命令

原因：npm 没有被正确添加到系统的环境变量中，或者 npm 的安装路径没有被正确识别

以下是一些解决步骤：

确认 Node.js 和 npm 的安装
首先，确保 Node.js 和 npm 已经正确安装在你的系统上。

打开命令行界面。

输入 node -v 来检查 Node.js 是否已安装。

如果 Node.js 版本显示出来，那么 Node.js 已经安装。

检查 npm 是否安装
在命令行中输入 npm -v。如果 npm 没有安装或者没有正确配置，这里通常会报错。
确认 npm 的安装路径
你可以尝试在 Node.js 的安装目录下查找 npm 可执行文件。通常，Node.js 和 npm 会一起安装在类似 C:\Program Files\nodejs\ 的目录下。

确认 npm 的实际安装路径，例如可能是 C:\Program Files\nodejs\npm.cmd（Windows）或 /usr/local/bin/npm（Mac/Linux）。