基于vue,脚手架2.0,详细讲解项目搭建，插件使用，以及里面的小坑，可作为模板使用（基本全文注释）.zip

# vue-admin-stepbystep > A Vue.js project ## Build Setup ``` bash # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report ``` # Vue 项目 - [项目地址 https://github.com/whylisa/vue-admin-step-by-step) ## 项目功能 - 1 登录 - 2 首页 - 3 退出 - 4 table页 ## 项目技术点 - 1，使用vue - 2，使用echarts - 3, 使用json-server - 4, 使用node起一个简单的服务,服务于接口 - 5, 使用axios - 6, vue-router的使用规则(异步加载，和同步加载) - 7, 回话拦截的使用（localstorage or cookie） - 8, 配合element-UI - 9, 修改组件里面的样式里面的坑 - 10, 打包时的优化 - 11, DNS优化 - 12, 配置本地代理，使用接口 - 13, 使用axios配合json-server 模拟增删改查 - 14, 使用nprogress 插件 - 15, 鲜为人知的element-UI 的滚动条 - 16, 栅格布局，大小屏适应配合媒体查询 - 17, css使用less - 18, 代码风格，个人风格，禁用了jslint 防止不懂得小伙伴抓狂 - 19, 兼容性的处理 ## 项目搭建 - 1 `vue init webpack XX` ```html Project name ：默认 Project description ：默认 Author ：默认 Vue build ：选择 Runtime + Compiler Install vue-router? ：Y Use ESLint to lint your code? ：Y 选择 Standard Set up unit tests ：n Setup e2e tests with Nightwatch? : n Should we run `npm install` for you after the project has been created? (recommended) : Yes, use NPM ``` - 2 进入项目：cd vue-admin-stepbystep - 3 运行项目：npm run dev ## 如何添加一个新的功能？？？ - 1 在 `components` 中新建一个文件夹（login），在文件中创建组件(Login.vue) - 2 在 `router/index.js` 中导入组件（login.vue） - 3 配置路由规则 ## 在项目中使用 element-ui - [ElementUI 文档](http://element-cn.eleme.io/#/zh-CN/component/installation) - 安装：`npm i element-ui -S` ```js // main.js // 导入elementui - js import ElementUI from 'element-ui' // 导入elementui - css import 'element-ui/lib/theme-chalk/index.css' // 安装插件 Vue.use(ElementUI) ``` --- ## 项目启动做了什么 - 1 在终端中运行：`npm run dev`，实际上就是运行了：`webpack-dev-server ...` - 2 使用 webpack-dev-server 开启一个服务器 - 3 根据指定的入口 `src/main.js` 开始分析入口中使用到的模块 - 4 当遇到 `import` 的时候，webpack 就会加载这些模块内容（如果有重复模块，比如：Vue，实际上将来只会加载一次），遇到代码就执行这些代码 - 5 创建 Vue 实例，将 App 组件作为模板进行编译，并且将 App 组件中 template 的内容渲染在页面 #app 的位置 ## 登录功能 - 1 安装：`npm i -S axios` - 2 在 `Login.vue` 组件中导入 axios - 3 使用 axios 根据接口文档来发送请求，完成登录 ## 编程式导航 - 就是通过 JS 代码来实现路由的跳转功能 ```js // 注意：是 router 不是 route // router用来实现路由跳转，route用来获取路由参数 // push 方法的参数为：要跳转到的路由地址（path） this.$router.push('/home') ``` ## 密码 - 给输入框组件添加 type="password" 就变为密码框状态了 ```html <el-input type="password" v-model="loginForm.password"></el-input> ``` ## 登录拦截 - 说明：在没有登录的情况不应该让用户来访问除登录以外的任何页面 ### 登录和拦截的整个流程说明 - 1 在登录成功以后，将 token 存储到 localStorage 中 - 2 在 导航守卫 中先判断当前访问的页面是不是登录页面 - 3 如果是登录页面，直接放行（next()） - 4 如果不是登录页面，就从 localStorage 中获取 token，判断有没有登录 - 5 如果登录了，直接放行（next()） - 6 如果没有登录，就跳转到登录页面让用户登录（next('/login')） ## token 机制的说明 - 在项目中，如果登录成功了，那么，服务器会给我们返回一个 token - 这个 token 就是登录成功的标识 - 这个 token 就相当于使用 cookie+session 机制中的 sessionid ## 公司人员和项目开发流程 - 1 产品经理定制项目的需求 - 2 分配任务：先将所有的任务分配到项目组，然后，再由项目组具体分配给每个开发人员 - 3 开发：拿到 产品原型 + 需求文档 + UI 设计稿 资料，转化为 HTML 页面，完成功能 - 4 功能完成后，自己测试有没有 Bug - 5 由测试人员来测试你的功能，当测试出 Bug 后，就会通过 禅道 这样的项目管理系统，来提出 Bug - 6 由 自己 修改 测试人员提出来的 bug - 7 最终，没有 bug 了，项目才会上线 ```html 产品经理（Product Manager） 提需求 产出： 产品原型 + 需求文档 原型设计软件：Axure 、墨刀 UI（设计） 将 产品经理 给的 原型图 设计为 好看的UI稿 FE（前端）front-end 产品原型 + 需求文档 + UI设计稿 ===> HTML页面 BE（后端） back-end 给前端提供数据接口 测试人员 产品原型 + 需求文档 + UI设计稿 来测试我们写的功能 发现你的功能 与 需求 不一致，那就说明除Bug了，那么，测试人员就会提Bug Bug系统： 禅道 项目经理（管理技术） 技术攻坚，与其他项目组人员沟通，分配任务 等 ``` ## vue 单文件组件中的 scoped - 作用：给 `style` 标签添加 `scoped` 属性以后，样式只会对当前组件中的结构生效，而不会影响到其他组件 ## vue 单文件组件中的 lang - 作用：添加 `lang="less"` 后，就可以使用 less 语法了 - 但是需要自己安装：`npm i -D less less-loader` ## VSCode 中使用 Vetur 插件格式化单文件组件的 template - 打开设置，配置：`"vetur.format.defaultFormatter.html": "js-beautify-html"` ## 接口调用的说明 - 注意：**所有接口都需要传递 token，只有传递了正确的 token，服务器才会将数据返回给前端** - 如果没有传递`token`，服务器会返回 `401` ，告诉接口调用者，没有权限来访问这个接口 --- ## cookie+session VS token - [干掉状态：从 session 到 token](https://github.com/zqran/blog/issues/2) ## Git 使用 - [远程分支](https://blog.csdn.net/u012701023/article/details/79222731) ```bash # 克隆仓库 git clone [仓库地址] # 推送 git push [仓库地址] master # 简化推送地址 git remote add XX [仓库地址] git push -u XX master # 第一次执行上面两条命令，以后只需要输入以下命令即可 git push XX # 拉取 git pull [仓库地址] master git pull XX master ``` ## 路由参数分页 - 1 配置分页路由参数, 参数是可选的 - 参数可选后, 路由就能够匹配: `/goods` 或者 `/goods/3` - 2 使用路由来分页, 有两种情况需要处理: - 3 第一种: 进入页面,就要根据当前路由参数中的页码,来获取到对应页的数据 - 4 第二种: 点击分页组件获取数据, 需要做两件事: - 4.1 获取到当前页的数据( 调用获取数据的方法 ) - 4.2 修改哈希值为当前页码 ( this.$router.push() ) - 5 点击分页按钮获取数据的第二种思路: - 5.1 点击分页按钮, 触发了分组件的 pageChange 事件 - 5.2 在 pageChange 事件中修改了路由( this.$router.push() ) - 5.3 路由发生改变后, watch 中的 $route 监视到了路由的改变 - 5.4 在 `$route(to) {}` 方法中, 通过参数 to 获取到当前页码, 重新调用获取数据的方法来获取当前页的数据 ## 项目打包和优化 - 打包命令：`npm run build` ## 按需加载 - 1 修改 `router/index.js` 中导入组件的语法 ```js // 使用： const Home = () => impo