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 创建

## 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

<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>

如何确认项目类型

1. 检查项目依赖：

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

1. 检查配置文件：

• • 如果项目有 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 的安装路径没有被正确识别

以下是一些解决步骤：

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

打开命令行界面。

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

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

1. 检查 npm 是否安装
   在命令行中输入 npm -v。如果 npm 没有安装或者没有正确配置，这里通常会报错。
2. 确认 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）。

1. 添加 npm 到环境变量

右键点击“此电脑”或“计算机”，选择“属性”。

点击“高级系统设置”。

在“系统属性”窗口中，点击“环境变量”。

在“系统变量”区域找到名为 Path 的变量，选择它然后点击“编辑”。

在打开的窗口中点击“新建”，添加 npm 的路径（例如 C:\Program Files\nodejs\）。

点击“确定”保存更改。

重新打开命令行窗口，再次尝试运行 npm -v。

1. 重新安装 npm（如果需要）
   如果上述步骤都没有解决问题，考虑重新安装 Node.js，它通常会自动包含 npm。可以从 Node.js 官网下载最新版本的安装包。

2，vue -v 报不是内部或者外部命令

1，检查 node -v npm -v 是否正常

2，安装 vue-cli

cnpm install -g @vue/cli

3，vue --version 或者 vue -V 能正常显示版本

3，npm i 或者cnpm i 报错

类似如下错误

排查方向：

vscode的终端里运行，可能不是超管用户，没有权限。

解决方法1（推荐）：

**1）**在windows 系统中搜索框 输入 Windows PowerShell，选择 管理员身份运行。

2）命令行里,输入set-ExecutionPolicy RemoteSigned，然后输入选择更改权限为A，最后可以通过 get-ExecutionPolicy 查看当前的状态。

3）重新打开vscode，即可在“终端”中运行命令。

解决方法2：不使用PowerShell，通过操作系统的“命令行提示符”，–》用管理员身份打开，然后输入运行相关命令。

4，npm run serve 或者npm run dev 失败

检查package.json 文件，确认自己使用serve 还是dev

“scripts”: {

​ “serve”: “vue-cli-service serve”,

​ “build”: “vue-cli-service build”,

​ “lint”: “vue-cli-service lint”

},

“scripts”: {

​ “dev”: “vue-cli-service serve”,

​ “build”: “vue-cli-service build”,

​ “lint”: “vue-cli-service lint”

},