如何创建一个vue项目

目录

1.环境准备

2.检查node和npm版本,确定已安装nodejs

3.全局安装@vue/cli、webpack、webpack-cli、@vue/cli-init

4.检查vue版本,注意V是大写

5.创建vue项目

6.得到的vue项目目录结构如下:


1.环境准备

安装nodejs,或者安装nvm,并使用nvm安装nodejs,总之电脑上要有nodejs。此处不做介绍,可自行百度教程。

2.检查node和npm版本,确定已安装nodejs

3.全局安装@vue/cli、webpack、webpack-cli、@vue/cli-init

复制代码
npm install -g @vue/cli
npm install -g webpack
npm install -g webpack-cli
npm install -g @vue/cli-init

4.检查vue版本,注意V是大写

复制代码
vue -V

注意,如果提示,'vue' 不是内部或外部命令,也不是可运行的程序 或批处理文件,处理方式如下:

①找到 npm 的全局安装路径,

复制代码
npm config get prefix

②检查路径下是否有vue.cmd文件,或者路径的bin文件夹下是否有vue.cmd文件,如果有,把vue.cmd文件所在路径添加到高级环境变量中,即可。

5.创建vue项目

复制代码
vue init webpack 项目名

6.得到的vue项目目录结构如下:

至此,vue项目创建完成,可以愉快的写代码啦。

相关推荐
想睡好5 分钟前
setup
前端·javascript·html
桜吹雪12 分钟前
DeepSeekV3.2模型内置Agent体验
javascript·人工智能
逆向新手15 分钟前
js逆向-某省特种设备aes加密研究
javascript·爬虫·python·逆向·js
光影少年16 分钟前
react navite相比较传统开发有啥优势?
前端·react.js·前端框架
岁月宁静17 分钟前
软件开发工程师如何借助 AI 工具进行软件自测
前端·ai编程·测试
我爱学习_zwj20 分钟前
动态HTTP服务器实战:解析请求与Mock数据
开发语言·前端·javascript
NMBG2221 分钟前
外卖综合项目
java·前端·spring boot
小白阿龙22 分钟前
样式不生效/被覆盖(CSS优先级陷阱)
前端·css
flashlight_hi24 分钟前
LeetCode 分类刷题:110. 平衡二叉树
javascript·算法·leetcode
Beginner x_u25 分钟前
Vue 事件机制全面解析:原生事件、自定义事件与 DOM 冒泡完全讲透
前端·javascript·vue.js·dom