practise vue shop front
1.0.0
Um projeto de código para aprender com o curso Dark Horse Front-End Element 2019.
Antes de usar este projeto, é recomendável aprender primeiro vue.js. Esse é o limite de aprendizado da estrutura de UI do elemento. Não fique ansioso por sucesso rápido
Índice do projeto de servidor back-end que suporta este projeto: learnVue_shop que suporta o projeto de API do servidor
A interface API de back-end usada neste projeto é a interface API de back-end pública fornecida pela Luo Tianyi Conservation Association
Endereço oficial do curso Front-End da Dark Horse:
Endereço do projeto front-end: http://shop.liulongbin.top/
Endereço da interface de back-end: https://www.liulongbin.top:8888/api/private/v1/
Documento de interface API: Link: https://pan.baidu.com/s/1KJPfaFaPadW4JdGjCt54NQ Código de extração: mgbr
Baixe o conjunto completo de cursos: Link: https://pan.baidu.com/s/1hBwZLR-Wbjt28YSEzVi6AQ Código de extração: 2urn
Nota: O endereço da interface backend deve ter um token para enviar e receber solicitações normalmente. Siga o curso do projeto para saber mais.
Por favor, não exclua dados aleatoriamente. Se você excluí-los, adicione-os novamente. Ao excluí-los, deixe um ou dois na lista. Principalmente para a parte de permissões de função, se todos os dados de permissão forem excluídos, os alunos que fizeram esta parte não poderão continuar. Outra dica, se não houver dados, você pode acessar o site do projeto e adicionar alguns dados.
Usuários da estação b: interface API de back-end pública fornecida pela Luo Tianyi Conservation Association
Nome de usuário: admin Senha: 123456
Endereço de exemplo de projeto da Associação de Conservação Luo Tianyi: http://gl.timemeetyou.com
Caso a interface falhe ou o usuário seja excluído, você pode conversar em particular com ele para restaurar o banco de dados.
# 克隆项目
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 中继续处理
--> 登陆成功Por que usá-lo desta forma? Por exemplo, se a interface da API em segundo plano mudar temporariamente, só precisamos modificar a variável url do arquivo request.js na pasta de rede para alterar globalmente a interface da API, o que está alinhado com a ideia de modularização e mais conveniente para gerenciamento de código. Também é mais conveniente reutilizar métodos API.
// 加入了$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 ;
}
}Endereço de download: vscode
Esta ferramenta irá formatar e organizar automaticamente o código para você. vscode, vá para a loja de plug-ins para baixar o plug-in [Prettier - Code formatador]. Após a conclusão da instalação, abra vscode [Arquivo] -> [Preferências]. -->[Configurações] e encontre o json em Há um pequeno ícone no canto superior direito da página de configurações. Clique para mudar para o modo de configuração json. Se você tiver outras configurações do projeto eslint e não quiser substituir esta regra. Você pode copiá-lo para o arquivo de configuração de [Workspace], você não precisa substituí-lo pela configuração de [User]) Copie o json abaixo para o arquivo de configuração
{
"[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 "
}
}Esta ferramenta irá formatar e organizar automaticamente CSS, sass e menos código, e classificar automaticamente a ordem do CSS vscode. Você precisa ir à loja de plug-ins para baixar [stylelint-plus]. em é o seguinte
{
"stylelint.enable" : true ,
"css.validate" : false ,
"less.validate" : false ,
"scss.validate" : false ,
"stylelint.autoFixOnSave" : true
}[Custo de importação] Verifique o tamanho dos módulos dependentes que você introduziu
[Auto Close Tag] Completar tags HTML automaticamente Se você inserir <a> ela será preenchida automaticamente </a>
[Auto Rename Tag] Renomeie automaticamente tags HTML Se <a> for alterado para <b> , a tag final </a> será automaticamente alterada para </b>
