安装vue-cli2.0并创建项目

文章目录

  • [1 安装node](#1 安装node)
  • [2 安装vue-cli](#2 安装vue-cli)
  • [3 创建基于webpack模板的项目](#3 创建基于webpack模板的项目)
  • [4 项目结构](#4 项目结构)

1 安装node

  • 之前写的博客中介绍了如何安装:NodeJS的安装【windows】
  • 安装完毕后,可以在命令行中输入node -vnpm -v,若出现版本号,则安装成功。

2 安装vue-cli

  • 输入npm install -g @vue/cli
  • 可能出现的错误:4048错误。
    解决方法:以管理员身份运行命令提示符,然后安装。
  • 输入vue -v,若出现版本号,则安装成功。

3 创建基于webpack模板的项目

  • 转到项目想要创建的文件夹,这里设置的是桌面:cd /d %userprofile%\Desktop
  • 输入vue init webpack todolist

    这里可能会出现错误:Command vue init requires a global addon to be installed. Please run npm i -g @vue/cli-init and try again.,按照提示输入npm i -g @vue/cli-init 即可。
  • (若出现上述错误)再次输入 npm i -g @vue/cli-init,然后根据提示依次输入即可。
  • 项目创建成功,启动项目:cd todolistnpm run dev
  • 项目运行成功。
  • 在浏览器输入localhost:8080可显示该页面。

4 项目结构

  • build:项目的webpack配置文件。
  • config:针对开发环境和线上环境的一些配置文件。
  • node_modules:项目的依赖。
  • src:源代码,src-main.js:整个项目的入口文件。
  • static:静态资源。
相关推荐
程序员小寒2 小时前
JavaScript设计模式(八):命令模式实现与应用
前端·javascript·设计模式·ecmascript·命令模式
wgod2 小时前
new AbortController()
前端
UXbot2 小时前
UXbot 是什么?一句指令生成完整应用的 AI 工具
前端·ai·交互·个人开发·ai编程·原型模式·ux
棒棒的唐2 小时前
WSL2用npm安装的openclaw,无法正常使用openclaw gateway start启动服务的问题
前端·npm·gateway
哔哩哔哩技术2 小时前
使用Compose Navigation3进行屏幕适配
前端
Z_Wonderful3 小时前
在 Next.js 中,使用 [id] 或 public 作为文件夹或文件名是两种完全不同的概念,分别对应 动态路由 和 静态资源托管
javascript·网络·chrome
咬人喵喵3 小时前
E2.COOL 平台深度解析:从特效分类到实战操作指南
前端·编辑器·svg
RisunJan4 小时前
Linux命令-named-checkzone
linux·前端
小陈工4 小时前
Python Web开发入门(十):数据库迁移与版本管理——让数据库变更可控可回滚
前端·数据库·人工智能·python·sql·云原生·架构
吹晚风吧4 小时前
解决vite打包,base配置前缀,nginx的dist包找不到资源
服务器·前端·nginx