vue-element-admin完整開源項目介紹、本地部署和初步探索


1 說明:

1.1 從一個廣受好評的開源項目:vue-element-admin的本地化,來初步分析vue的相關知識。

2 github地址和下載本地部署:

https://github.com/PanJiaChen/vue-element-admin

打開終端,非root的根目錄下

git clone https://github.com/PanJiaChen/vue-element-admin.git
cd vue-element-admin
npm install #這種安裝報錯,先按照下面的按照
npm install --registry=https://registry.npm.taobao.org --loglevel=silly
npm cache clean --force
npm install #再從這里安裝,就不會報錯
npm run dev #打開

說明:npm i=npm install

如果安裝cnpm,也可以,但是據說經常報錯,cnpm有時候用起來會有很多問題,無緣無故地安裝些多余的東西。

建議npm i進行安裝依賴,雖然有點慢。

3 自動彈出界面:

 

vue-element-admin完整開源項目介紹、本地部署和初步探索

 

4 直接點擊:login,進入即可

 

vue-element-admin完整開源項目介紹、本地部署和初步探索

 

5 用微軟vscode編輯器打開文件夾

 

vue-element-admin完整開源項目介紹、本地部署和初步探索

 

6 自己可以根據已經開源的項目,進行局部修改進行vue的相關學習。

vue的結構的一般和大概了解。

├── build // 構建相關  
├── config // 配置相關
├── src // 源代碼
│   ├── api // 所有請求
│   ├── assets // 主題 字體等靜態資源
│   ├── components // 全局公用組件
│   ├── directive // 全局指令
│   ├── filtres // 全局 filter
│   ├── icons // 項目所有 svg icons
│   ├── lang // 國際化 language
│   ├── mock // 項目mock 模擬數據
│   ├── router // 路由
│   ├── store // 全局 store管理
│   ├── styles // 全局樣式
│   ├── utils // 全局公用方法
│   ├── vendor // 公用vendor
│   ├── views // view
│   ├── App.vue // 入口頁面
│   ├── main.js // 入口 加載組件 初始化等
│ └── permission.js // 權限管理
├── static // 第三方不打包資源
│   └── Tinymce // 富文本
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置項
├── .gitignore // git 忽略項
├── favicon.ico // favicon圖標
├── index.html // html模板
└── package.json // package.json

7 今日到此,下次學習。

相關學習網站:https://juejin.im/post/59097cd7a22b9d0065fb61d2


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM