practise vue shop front
1.0.0
A code project to learn from the 2019 Dark Horse Front-End Element course.
Before using this project, it is recommended to learn vue.js first. This thing is the learning threshold of the element UI framework. Don’t be eager for quick success
Index of the back-end Server project supporting this project: learnVue_shop supporting server API project
The backend API interface used in this project is the public backend API interface provided by Luo Tianyi Conservation Association
Dark Horse Front-End Official Course Address:
Front-end project address: http://shop.liulongbin.top/
Backend interface address: https://www.liulongbin.top:8888/api/private/v1/
API interface document: Link: https://pan.baidu.com/s/1KJPfaFaPadW4JdGjCt54NQ Extraction code: mgbr
Download the full set of courses: Link: https://pan.baidu.com/s/1hBwZLR-Wbjt28YSEzVi6AQ Extraction code: 2urn
Note: The backend interface address must have a token to send and receive requests normally. Please follow the project course to learn more.
Please do not delete data randomly. If you delete it, please add it back. When you delete it, please leave one or two in the list. Especially for the role permissions part, if all the permission data is deleted, students who have done this part will not be able to continue. Another tip, if there is no data, you can go to the project website and add some data.
Station b users: Public backend API interface provided by Luo Tianyi Conservation Association
Username: admin Password: 123456
Project example address of Luo Tianyi Conservation Association: http://gl.timemeetyou.com
In case the interface fails or the user is deleted, you can privately chat with him to restore the database.
# 克隆项目
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 中继续处理
--> 登陆成功Why use it this way? For example, if the background API interface changes temporarily, we only need to modify the url variable of the request.js file in the network folder to globally change the API interface, which is in line with the idea of modularization and more convenient for code management. It is also more convenient to reuse API methods.
// 加入了$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 address: vscode
This tool will automatically format and organize the code for you. vscode go to the plug-in store to download the [Prettier - Code formatter] plug-in. After the installation is complete, open vscode [File]-->[Preferences]-->[Settings] and find the json in There is a small icon in the upper right corner of the settings page. Click to switch to json configuration mode. If you have other project eslint configurations and do not want to replace this rule, You can copy it to the configuration file of [Workspace], you don’t need to replace it with [User] configuration) Copy the json below to the configuration file
{
"[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 "
}
}This tool will automatically format and organize CSS, sass, and less code, and automatically sort the order of CSS vscode. You need to go to the plug-in store to download [stylelint-plus]. The specific JSON configuration of this plug-in is as follows
{
"stylelint.enable" : true ,
"css.validate" : false ,
"less.validate" : false ,
"scss.validate" : false ,
"stylelint.autoFixOnSave" : true
}[Import Cost] Check the size of the dependent modules you introduced
[Auto Close Tag] Automatically complete html tags. If you enter <a> it will be automatically completed </a>
[Auto Rename Tag] Automatically rename html tags. If <a> is changed to <b> , the end tag </a> will be automatically changed to </b>
