如何创建一个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项目创建完成,可以愉快的写代码啦。

相关推荐
晚霞的不甘4 分钟前
解决 Flutter for OpenHarmony 构建失败:HVigor ERROR 00303168 (SDK component missing)
android·javascript·flutter
清风细雨_林木木8 分钟前
react 中 form表单提示
前端·react.js·前端框架
小二·15 分钟前
Python Web 开发进阶实战:边缘智能网关 —— 在 Flask + MicroPython 中构建轻量级 IoT 边缘推理平台
前端·python·flask
TOPGUS16 分钟前
解析200万次对话数据:ChatGPT引用内容的核心特征与优化策略
前端·人工智能·搜索引擎·chatgpt·seo·数字营销
羊仔AI探索24 分钟前
前端已死,未来已来,谷歌Gemini 3 Pro杀回来了!
前端·人工智能·ai·aigc
2501_9445215927 分钟前
Flutter for OpenHarmony 微动漫App实战:分享功能实现
android·开发语言·javascript·flutter·ecmascript
快起来搬砖了28 分钟前
UniApp/Vue2 通用工具函数库(完整版):覆盖校验、格式、业务全场景
前端·uni-app
GGGG寄了38 分钟前
HTML——图像标签及多媒体标签
前端·html
小小码农Come on1 小时前
QPushButton QSS(一):按钮常用qss
前端·javascript·css·qt5
Booksort1 小时前
React+js环境配置(极速版)
前端·javascript·react.js