據說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:\Windows\system32>node -v
v12.16.1
查看git版本
C:\Windows\system32>git --version
git version 2.25.1.windows.1
查看npm版本(最新版的node在安裝時同時也安裝了npm)
C:\Windows\system32>npm -v
6.13.4
查詢包路徑
C:\Windows\system32>npm root -g
C:\Users\aaa\AppData\Roaming\npm\node_modules
在node安裝目錄下下新建兩個文件夾
node_global
全局包下載存放
node_cache
node緩存
修改包路徑
C:\Windows\system32>npm config set prefix "D:\nodejs\node_global"
C:\Windows\system32>npm config set cache "D:\nodejs\node_cache"
下載一個全局包,發現下載的全局包vue
已經放在node_global目錄
C:\Windows\system32>npm install -g vue
+ vue@2.6.11
added 1 package from 1 contributor in 3.344s
C:\Windows\system32>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:\Windows\system32>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_modules\fsevents):
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,運行即可