当前位置：首页 > article >正文

Django+vue前后端分离实战--vue后台管理系统--vue环境安装项目创建

article 2024/11/18 7:31:55

Django+vue前后端分离实战--vue后台管理系统

安装nodejs+vue cli
vue-cli创建项目

安装nodejs+vue cli

1、下载nodejs并安装 https://nodejs.org/dist/v20.9.0/node-v20.9.0-x64.msi
在这里插入图片描述
2、修改npm 默认仓库地址，要修改成taobao的镜像npm 仓库地址

cmd下命令：npm config set registry https://registry.npm.taobao.org
在这里插入图片描述
3、安装最新的vue脚手架vue-cli(cmd下命令：npm install -g @vue/cli）
（如果第3步安装了cnpm可在cmd下命令：cnpm install -g @vue/cli）
说明(如果你之前已经安装vuecli2 请先用命令：npm uninstall -g vue-cli 卸载之前的vuecli2，否则不能使用vue create命令)
在这里插入图片描述

vue-cli创建项目

1、cmd运行vue ui 并打开chrome url:http://localhost:8000/project/select
在这里插入图片描述
修改目录后，点击创建项目。
2、输入项目名称，取消git 。并下一步

在这里插入图片描述
3、选择router和vuex

4、选择vue2后，创建项目，等待项目创建。
5、安装插件 elementui.记得一定要点击完成安装，要不elementui 不会引入到系统中

6、vscode打开项目，然后运行 npm run serve后, chrom打开页面：http://localhost:8080/
在这里插入图片描述