据说Ant Design Vue可以前后端分离,所以又开始学习了。
参考资料
视频教程:https://learning.dcloud.io/#/
菜鸟教程:https://www.runoob.com/vue2/vue-start.html
Ant Design Pro:https://pro.loacg.com/docs/getting-started
git下载地址:https://git-scm.com/downloads
nodejs下载地址:https://nodejs.org/zh-cn/download/
安装过程
1.安装git(网上随便找教程)
2.安装node、配置环境(要配环境,网上随便找教程 https://www.jianshu.com/p/13f45e24b1de、https://www.cnblogs.com/zhouyu2017/p/6485265.html)
安装好后,使用命令提示符(小黑框框,win+r->cmd)
查看node版本
C:Windowssystem32>node -v
v12.16.1
查看git版本
C:Windowssystem32>git --version
git version 2.25.1.windows.1
查看npm版本(最新版的node在安装时同时也安装了npm)
C:Windowssystem32>npm -v
6.13.4
查询包路径
C:Windowssystem32>npm root -g
C:UsersaaaAppDataRoaming
pm
ode_modules
在node安装目录下下新建两个文件夹
node_global
全局包下载存放
node_cache
node缓存
修改包路径
C:Windowssystem32>npm config set prefix "D:
odejs
ode_global"
C:Windowssystem32>npm config set cache "D:
odejs
ode_cache"
下载一个全局包,发现下载的全局包vue
已经放在node_global目录
C:Windowssystem32>npm install -g vue
+ vue@2.6.11
added 1 package from 1 contributor in 3.344s
C:Windowssystem32>npm install express -g
+ express@4.17.1
added 50 packages from 37 contributors in 17.406s
新建目录,右键选择git bash here
git clone --depth=1 https://github.com/sendya/ant-design-pro-vue.git my-project
cmd进入该目录安装
C:Windowssystem32>D:
D:>cd D:my-project
D:my-project>npm install
……
好像不行
清除缓存
D:my-project>npm cache clean --force
npm WARN using --force I sure hope you know what you are doing.
淘宝镜像
D:my-project>npm config set registry http://registry.npm.taobao.org
安装
D:my-project>npm install
> vue-antd-pro@2.1.0 postinstall D:my-project
> opencollective-postinstall
Thank you for using vue-antd-pro!
If you rely on this package, please consider supporting our open collective:
> https://opencollective.com/ant-design-pro-vue/donate
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modulesfsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
up to date in 10.283s
39 packages are looking for funding
run `npm fund` for details
运行
D:my-project>npm run serve
> vue-antd-pro@2.1.0 serve D:my-project
> vue-cli-service serve
VUE_APP_PREVIEW true
INFO Starting development server...
95% emitting ThemeColorReplacerExtracted theme color css content length: 22890
98% after emitting CopyPlugin
DONE Compiled successfully in 39639ms 16:10:29
App running at:
- Local: http://localhost:8000/
- Network: http://172.16.100.175:8000/
浏览器打开http://localhost:8000/,显示了出来,成功
或者用Hbuilder导入my-project,然后找到App.vue,运行即可