前端初探 Vue.js 第 1 期:创建第一个Vue项目
Vue.js 作为前端三大框架之一,一直享有盛誉。本文我们将来实现第一个Vue项目。
准备
安装 Node.js https://nodejs.org/
安装 VSCode https://code.visualstudio.com/Download
输入npm -v
以检查是否安装成功,建议下载最新LTS版本即可。笔者所用为10.8.2
配置镜像源
配置默认源 npm config set registry https://registry.npmmirror.com
配置临时源 npm --registry https://registry.npmmirror.com xxx(选项)
(加速模块下载)
创建项目
打开VSCode
并选择一个文件夹作为工作区。打开终端输入指令:
npm create vue@latest
在配置好源的情况下,将会弹出以下内容。
> npx > create-vue Vue.js - The Progressive JavaScript Framework √ Project name: ... vue-project √ Add TypeScript? ... No / Yes √ Add JSX Support? ... No / Yes √ Add Vue Router for Single Page Application development? ... No / Yes √ Add Pinia for state management? ... No / Yes √ Add Vitest for Unit Testing? ... No / Yes √ Add an End-to-End Testing Solution? » No Scaffolding project in 项目路径... Done. Now run: npm install npm run dev
至此,项目创建完成。
按照上述指令运行即可。
运行项目
输入npm run dev
,如果成功,将会给出一个http链接,在浏览器打开即可!你将看到如下页面。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~