组件开发的环境准备: nodejs安装,npm镜像源的修改,pnpm包管理器的安装(全局安装),基于pnpm创建脚手架项目

Node.js 是一个开源的、跨平台的 JavaScript 运行环境(本质是Chrome引擎的封装),允许开发者使用 JavaScript 来编写服务器端代码

npm(Node Package Manager)是 Node.js 包管理器, 用来安装各种库、框架和工具

【Node.js官网】

https://nodejs.org

【npm官网】

https://www.npmjs.com

Node.js安装的时候一直按next就可以了,直到最后按finish就完成安装了,效果如下图

接下来如下图

在画圈的地方输入cmd然后按回车键,跳出如下图

【设置淘宝镜像源(默认镜像源是国外网址,国内访问经常失败,所以要设置淘宝镜像源)】

输入:npm config set registry https://registry.npmmirror.com/ 按回车键

再安装pnpm工具包: npm install -g pnpm

接下来创建脚手架:pnpm create vue

项目名称可改可不改,配置脚手架相关插件(最简单脚手架项目就是全部选"否(一直按回车键)")

接下来就直接按照可执行以下命令的3个命令执行

cd vue-project

再输入 pnpm i

再输入 pnpm dev 启动它

复制画圈的网址到浏览器打开它

接下来在软件( Visual Studio Code)打开

​​​​​​​ ​

【常用vscode插件的安装】

  1. Vue - Official (Vue官方插件,强烈推荐,默认的xxx.vue文件是没有语法高亮的,都是一片白色,不利于阅读,安装这个插件以后,语法就会高亮)

  2. 有些vscode编辑器版本较低,无法使用,这时候可以安装最新的vscode编辑器,或者换下面这个语法高亮插件(但是这个插件不好用,不推荐):

Vue 3 Support - All In One

  1. Vue VSCode Snippets (我们经常需要使用一些现成的代码片段,这个插件为我们提供大量代码片段,提高编码效率)

安装好后打开src这个文件,把App.vue这个文件的内容全部删掉,输入v3(vbase-3-setup),按回车(把画圈的地方删掉)

这样基本就完成了,只需要再输入内容就可以运行了

(运行只要打开之前复制在浏览器那个网页就行,没反应的话就刷新一下浏览器)

相关推荐
00后程序员张7 分钟前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
2301_768350236 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
华洛7 小时前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品
明远湖之鱼7 小时前
opentype.js 使用与文字渲染
前端·svg·字体
90后的晨仔8 小时前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js
今天头发还在吗8 小时前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
小刘不知道叫啥8 小时前
React 源码揭秘 | suspense 和 unwind流程
前端·javascript·react.js
szial8 小时前
为什么 React 推荐 “不可变更新”:深入理解 React 的核心设计理念
前端·react.js·前端框架
mapbar_front8 小时前
面试是一门学问
前端·面试
90后的晨仔8 小时前
Vue 3 中 Provide / Inject 在异步时不起作用原因分析(二)?
前端·vue.js