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

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

如何确认项目类型

  1. 检查项目依赖
    • 如果 package.json 中有 vite,说明项目是基于 Vite 的。
    • 如果有 @vue/cli-service,说明项目是基于 Vue CLI 的。
  1. 检查配置文件

-在这里插入图片描述

安装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”

},

http://www.hskmm.com/?act=detail&tid=12935

相关文章:

  • AppSpider 7.5.020 for Windows - Web 应用程序安全测试
  • 上周热点回顾(9.15
  • “学术造神”何时休?
  • python学习网站
  • vLLM 核心机密:大模型推理引擎内部长啥样?
  • 华为销量下滑OV米荣迎来窗口期
  • 【GitHub每日速递 250922】开源 AI 搜索引擎 Perplexica:本地大模型 + 多模式搜索,免费又强大!
  • coze工作流实战——三分钟读一本名著
  • 大厂是怎么识别“高潜员工”的?
  • 读人形机器人19后劳动经济
  • 2025年最佳笔记本扩展坞评测:一站式提升工作站效率
  • 论文查重项目
  • 我的第一个程序Hello,World!成功运行!
  • Day05-1-C:\Users\Lenovo\Desktop\note\code\JavaSE\Basic\src\com\David\scanner-Demo01~05(简易计算器)
  • Day05-C:\Users\Lenovo\Desktop\note\code\JavaSE\Basic\src\com\David\struct-ifDemo01~03+shunxuDemo
  • JS历理 优化login.js脚本2
  • Codeforces Round 1052 (Div. 2)
  • uboot启动流程
  • 内存泄漏
  • Context Engineering
  • ios在wifi模式下设置http代理
  • 面试官问:请画出 MySQL 架构图!这种变态问题都能问的出来
  • 基于协方差交叉(CI)的多传感器融合算法matlab仿真,对比单传感器和SCC融合
  • github/网盘/公众号信息收集
  • AtCoder Regular Contest 206 (Div. 2) 部分题解
  • Grafana 和 Openssh 高危漏洞修复
  • 基于双PI控制器和三电平SVPWM交流同步直线电机矢量控制系统的simulink建模与仿真
  • 学习日报(补发)
  • Influxdb 得模糊查询总结
  • 多表关系和多表查询