如何从0到1搭建vue2项目(后台管理系统)

准备工作

如何创建一个vue2项目

前提:需要安装node或nvm 下载脚手架

nvm下载地址

node下载成功

在这里插入图片描述

脚手架下载
npm i -g @vue/cli
成功
在这里插入图片描述

(1) 使用cmd终端直接创建

在键盘上win+r,输入cmd打开终端窗口,cd进入到vue项目所创建的目录里(我是直接创建在桌面上)

输入创建项目指令(vue create 项目名称)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-clxEJFEp-1691631186925)(assets/1691631110429.png)]

vue create app(项目名称)或vue create .(当前文件夹)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iB9frKNk-1691631186926)(assets/1691630443603.png)]

手动选择项目所需的基本配置选项(按enter键进入)
请选择预设:手动选择功能
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5K4xx8qF-1691631186927)(assets/1691630524759.png)]

选择以下几项(按空格选中或者取消选中,选好之后enter进入下一步)
选择要启动项目的Vue.js版本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TnG7bWC8-1691631186927)(assets/1691630655911.png)]

使用hash模式,使用暂时不适用history模式

hash模式 路由带#号
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LbkaccuC-1691631186928)(assets/1691630805286.png)]

使用css预处理语言

我选sass

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QuDBUh61-1691631186929)(assets/1691630837630.png)]

选择链接/格式化程序配置

在这里插入图片描述

选择保存的时候效验eslint规则
在这里插入图片描述
将配置文件放在独立文件夹中
在这里插入图片描述
将当前配置作为预设保留(自己取,取和项目一样的名字也可以)
下次可以直接用这个配置

配置完成
在这里插入图片描述

创建完毕

在这里插入图片描述

进入项目,并运行

在浏览器输入链接地址( 通常使用:http://localhost:8080/)
使用 vue create .当前目录插件的:直接npm run dev
使用 vue create app 创建项目名称为app的:cd app 再npm run serve
在这里插入图片描述
在这里插入图片描述
一个vue2项目创建成功

使用vue ui创建

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值