practise vue shop front
1.0.0
Folgen Sie dem Codeprogramm für den Dark Horse Front End Element Course 2019.
Gegenwärtig wird empfohlen, zuerst Vue.js zu lernen. Arbeiten Sie nicht hart
Dieses Projekt unterstützt Back -End -Server -Projektindex: LearnVue_Shop unterstützt Server -API -Projekt
Die in diesem Projekt verwendete Hintergrund -API -Schnittstelle ist die von der Luo Tianyi Protection Association bereitgestellte öffentliche Hintergrund -API
Dark Horse Front -End Offizielle Kursadresse:
Frontprojektadresse: http://shop.liulongbin.top/
Zurück -End -Schnittstelle Adresse: https://www.liulongbin.top: 8888/api/privat/v1/v1/
API -Schnittstellen -Dokument: Link: https://pan.baidu.com/s/1kjpfafapadw4jdgjct54nq Extrakt Code: Mgbr
Laden Sie einen vollständigen Satz von Kursen herunter: Link: https://pan.baidu.com/s/1hbwzlr-wbjt28ysezvi6aq extrahieren Code: 2urn
HINWEIS: Die Adresse der Back -End -Schnittstelle muss ein Token haben, um die Anfrage normal zu senden und zu empfangen.
Bitte löschen Sie die Daten nicht. Insbesondere in den Rollenberechtigungen können die Studierenden, die die Berechtigungsdaten löschen, weiterhin eine weitere Eingabeaufforderung erstellen.
Station B Benutzer: Die öffentliche Backstage -API -Schnittstelle von Luo Tianyi Protection Association
Benutzername: Administrator Passwort: 123456
Projektadresse der Luo Tianyi Protection Association: http://gl.timemeetyou.com
Falls die Schnittstelle ungültig ist oder der Benutzer gelöscht wird, können Sie privat darüber sprechen, um die Datenbank wiederherzustellen
# 克隆项目
git clone https://github.com/wangxinleo/learnVue_shop.git
# 进入项目目录
cd learnVue_shop
# 安装依赖
npm install
# 本地开发 启动项目
npm run serve
# 克隆项目
git clone https://github.com/wangxinleo/learnVue_shop.git
# 进入项目目录
cd learnVue_shop
# 切换到server分支
git checkout -b server origin/server
# 拉取server分支代码
git pull
# 安装依赖
npm install
# 源码部署
node ./app.js
- src //开发目录
- asset // 存放静态文件
- css
- font
- img
- common // 公用js文件
- network // api请求文件
- goodsCom
- home
- login
- order
- report
- rightsAndRoles
- users
- request . js // 封装axios请求
- router // 动态路由
- store // Vuex
- view // 视图文件
- App . vue
- main - dev . js //用于开发环境的入口文件
- main - prod . js //用于生产环境的入口文件
- main . js // main模板文件
- . browserslistrc // 指定打包的代码对哪些浏览器支持
- . editorconfig // 代码规范
- . eslintrc . js // eslint配置文件
- babel . config . js // 插件配置
- package . json //项目信息文件
- vue . config . js //用户自定义webpack配置文件 // 以login.vue 为例
执行 login ( ) 方法
--> 到network/login下找到login请求
--> 引用 request.js 封装的axios 方法
--> 请求到数据返回到login.vue 中继续处理
--> 登陆成功Warum so? Wenn sich die Hintergrund -API -Schnittstelle beispielsweise vorübergehend ändert, müssen wir die URL -Variablen der Datei request.js unter dem Netzwerkordner nur ändern, um die API -Schnittstelle global zu ändern, um dem modularen Denken und einer bequemeren Codeverwaltung zu entsprechen. Es ist auch bequemer für die Wiederverwendung der API -Methode.
// 加入了$bus的应用，用于跨组件通信
// main.js
Vue . prototype . $bus = new Vue ( )
// usersChildren/usersFunc/addUserDialog.vue
this . $bus . $emit ( 'freshClick' ) //很像父子之间传值的方法
// Users.vue
this . $bus . $on ( 'freshClick' , ( ) => {
console . log ( this )
this . getUsersList ( )
} )
// 父子组件通信
// 子组件代码实例
< template >
< div @ click = "open" > </ div >
< / template>
methods : {
open ( ) {
this . $emit ( 'showbox' , 'the msg' ) ; //触发showbox方法，'the msg'为向父组件传递的数据
}
}
// 父组件代码实例
< child @ showbox = "toshow" : msg = "msg" > < / child > //监听子组件触发的showbox事件,然后调用toshow方法
methods: {
toshow ( msg ) {
this . msg = msg ;
}
}Download -Adresse: VSCODE
Dieses Tool formatiert den Code automatisch für Sie. VSCODE GEHEN SIE zum Plug-in-Store, um [schöner-Code-Formatierer] zu herunterladen -in. In. Nachdem die Installation abgeschlossen ist In den JSON -Konfigurationsmodus.
{
"[vue]" : {
"editor.defaultFormatter" : " esbenp.prettier-vscode "
},
"editor.quickSuggestions" : {
"strings" : true
},
"workbench.colorTheme" : " One Monokai " ,
"editor.tabSize" : 2 ,
"editor.detectIndentation" : false ,
"emmet.triggerExpansionOnTab" : true ,
"editor.formatOnSave" : true ,
"javascript.format.enable" : true ,
"stylelint.enable" : true ,
"css.validate" : false ,
"less.validate" : false ,
"scss.validate" : false ,
"stylelint.autoFixOnSave" : true ,
"git.enableSmartCommit" : true ,
"git.autofetch" : true ,
"git.confirmSync" : false ,
"[json]" : {
"editor.defaultFormatter" : " esbenp.prettier-vscode "
},
"liveServer.settings.donotShowInfoMsg" : true ,
"explorer.confirmDelete" : false ,
"javascript.updateImportsOnFileMove.enabled" : " always " ,
"typescript.updateImportsOnFileMove.enabled" : " always " ,
"files.exclude" : {
"**/.idea" : true
},
"editor.codeActionsOnSave" : {
"source.fixAll.eslint" : true
},
"[javascript]" : {
"editor.defaultFormatter" : " esbenp.prettier-vscode "
},
"[scss]" : {
"editor.defaultFormatter" : " esbenp.prettier-vscode "
},
"[jsonc]" : {
"editor.defaultFormatter" : " esbenp.prettier-vscode "
}
}Dieses Tool formuliert automatisch CSS, SASS, weniger Code und sortiert automatisch die Reihenfolge von CSS VSCODE.
{
"stylelint.enable" : true ,
"css.validate" : false ,
"less.validate" : false ,
"scss.validate" : false ,
"stylelint.autoFixOnSave" : true
}[Kosten importieren] Sehen Sie sich die von Ihnen eingeführte abhängige Modulgröße an
[Auto schließen Sie Tag] Füllen Sie automatisch HTML -Tags, wie z. B. Eingabe <a> automatisch ausmachen </a>
[Automatisch umbenennen </a> <b> </b> <a> wird automatisch umbenannt.
