Vue_shop项目

项目技术以及使用plugin

此项目使用Vue-CLI脚手架

这是我的项目预设

项目使用的插件

1. vue-cli-plugin-element
   • element-ui——饿了么的集成UI库
2. @vue/cli-plugin-router
   • router——路由加载组件
3. @vue/cli-plugin-eslint
   • eslint——代码检验插件
   • 主要用来审核代码的格式
4. @vue/cli-plugin-babel
   • babel——我竟然不知道它是干什么的！

项目使用的依赖

开发依赖

1. babel-plugin-component
2. babel-plugin-transform-remove-console （在build时删除console.log()）
3. less/less_loader

运行依赖

1. axios
2. echarts
3. element-ui
4. loadsh 进行数据的处理（深度拷贝）
5. nprogress 加载条
6. vue-table-with-tree-grid

首先来分析一下vue-cli脚手架生成的文件

1. .vscode

   • 脚手架不生成此文件

   • 这儿我使用的开发工具是vscode，这是vscode相关的配置文件

2. dist

   • 脚手架不生成此文件

   • 这儿存放项目开发完成之后，build出的文件全部存放在这儿

   • 这也就是我们最终发行使用的文件

3. node_modules

   • 脚手架生成此文件
   • 这儿存放插件、依赖相关的文件
   • 这个文件夹也是我们整个工程中体积最大的文件

4. public

   • 脚手架生成此文件
   • 此文件夹包括一张vue的大头照和项目的html
   • html文件是我们整个项目中的核心，所有模块都会被渲染到这儿

5. src

   • 脚手架生成此文件

   • 我们开发项目的文件夹

6. .browserslistrc

   • 脚手架生成此文件

7. .editorconfig

   • 脚手架生成此文件

8. .eslintrc.js

   • 脚手架生成此文件
   • 这就是我们的代码校验的相关配置

9. .gitignore

   • 脚手架生成此文件

   • 这儿是使用git时，必须要使用的一个文件

   • 存放们不想上传到github仓库的文件

10. .prettierrc

    • 脚手架不生成此文件

11. babel.config.js

    • 脚手架生成此文件

12. package-lock.json

    • 脚手架生成此文件
    • 辅助版本管理

13. package.json

    • 脚手架生成此文件
    • 版本管理

14. README.md

    • 脚手架生成此文件

15. vue.config.js

    • 脚手架不生成此文件

相关配置

element.js

1. 在我们构建项目的时候，选择按需导入

2. 在这儿来声明组件

3. inport Vue from 'vue'
   import {
         Button, Message } from 'element-ui'
   // import 相关的组件名称，只有import,并且使用了组件，在我们的项目中才能生效
   Vue.use(Button)
   Vue.prototype.$message = Message
   // 给方法重命名，这样我们后面的使用会更方便
   

4. 一些相关的UI组件也可以在这儿导入，然后在组件中使用。

main.js

导入特定的字体包

1. alibaba字体包
2. 将字体相关的包放入工程中
3. 导入相关的字体包 import '../src/assets/fonts/iconfont.css'
4. 然后直接在vue组件中，直接使用官方的标签使用即刻

富文本编辑器

1. vue-quill-editor
2. 按照api文档导入相关包即可。 导入：import VueQuillEditor from 'vue-quill-editor' 然后再导入相关的样式
3. 参照文档将标签置于相应的位置 <quill-editor v-model="addForm.goods_introduce"></quill-editor>
4. 将富文本编辑器注册为全局可用组件 VUe.use(VueQuillEditor)

axios

1. 导入axios包。 import axios from 'axios'

2. 配置相关的根路径。 axios.default.baseURL = 'http://根路径/'

3. request拦截器

   • axios.interceptors.request.use(config => {
            
     	//这是为了通过token，来进行登录验证
       config.header.Authorization = window.sessionStorage.getItem('token')
         //必须在最后返回config
         return config
     })
     

   • 这是请求之前进行的处理

4. response拦截器`

• axios