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

相关推荐
梵得儿SHI4 小时前
Vue 高级特性:混入(Mixin)使用场景与问题、Vue3 组合式 API 替代方案精讲
前端·javascript·vue.js·组合式api·参数传递·mixin机制·显式调用
qq_336313934 小时前
javaweb-HTML和CSS(2)
前端·css·html
Sapphire~4 小时前
【模板】Jinja风格 Ruby风格
前端·后端
冰暮流星4 小时前
javascript之for-of循环
开发语言·javascript·ecmascript
不绝1914 小时前
Input/屏幕/Camera/光源/碰撞检测/音频相关
开发语言·javascript·ecmascript
火星数据-Tina4 小时前
体育平台搭建:如何高效引入赛事直播与比分数据
大数据·前端·网络
醉风塘4 小时前
完美升级!将ElTree生硬文本提示替换为优雅的ElEmpty组件
javascript·vue.js·elementui
RichardLau_Cx4 小时前
Google Chrome 浏览器安装「豆包插件」完整教程
前端·chrome·插件·豆包
stereohomology4 小时前
Typora中绕过主题html方式自定义字体的一个设置问题
前端·html
_OP_CHEN4 小时前
【前端开发之CSS】(四)CSS 常用元素属性宝典(下):背景与圆角进阶指南,让页面颜值飙升!
前端·css·html·页面开发·gui开发·css元素属性