从无到有构建vue实战项目（五）

【从无到有构建vue实战项目（五）】的更多相关文章

从无到有构建vue实战项目（四）

六.webpack的安装和配置为了快速构建vue项目,webpack是一个必不可少的工具,我们先来安装它,附上官网地址:https://www.webpackjs.com/ 要安装最新版本或特定版本,请运行以下命令之一: npm install --save-dev webpack npm install --save-dev webpack@<version> 如果你使用 webpack 4+ 版本,你还需要安装 CLI: npm install --save-dev webpack-cl…

从无到有构建vue实战项目（五）

八.错误总结(一) webpack打包项目识别子组件路径问题之所以出现了这样的问题是因为在webpack打包项目时,未将此处的子组件路径正确识别: 将此处的carousel改为carousel.vue成功解决问题 id命名不能包含html保留字引起的错误: 修改方法很简单,只需要将保留字id稍作改变即可 return返回对象问题: 错误原因很容易看出,是因为此处的return返回的数据应该是一个对象: 修改后错误排除:…

从无到有构建vue实战项目（一）

vue的安装首先下载nodehttp://nodejs.cn/download/ 有两种安装方式安装包安装和二进制文件安装输入以下命令,出现版本提示表示安装成功: node -v 10.15.3 再下载npm 由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了.同样可以通过输入 "npm -v" 来测试是否成功安装.命令如下,出现版本提示表示安装成功: $ npm -v 6.4.1 如果你安装的是旧版本的 npm,可以很容易得通过 npm 命令来升级,命令如下:…

从无到有构建vue实战项目（二）

二.vue项目的初步搭建该项目我采用了当下最流行的vue ui框架---element-ui,首先用vue-cli构建一个vue项目: vue create education 然后会出现一系列配置选项,此时一直回车就好: 然后进入项目文件夹,输入: npm run serve 出现以上情况,则说明运行成功,此时,在浏览器打开链接http://localhost:8080/,会看到如下界面: 然后安装element-ui(一定要在该项目根目录下安装): npm i element-ui -s…

从无到有构建vue实战项目（三）

四.响应式布局的实现 elemnt-ui参考bootatrap提供了响应式布局,附上地址:https://element.eleme.cn/#/zh-CN/component/layout 以下是我的布局设计,目前看起来没什么错误: 其实就是做了每行总共24个栅格,在不同尺寸的页面上如何分配宽度比例: 名称尺寸 xs <768px sm ≥768px md ≥992px lg ≥1200px xl ≥1920px 比如这里直接给xs赋值4,他的宽度在xs(<768px,手机)就是4/24.…

从无到有构建vue实战项目（七）

十四.Vuex的使用 Vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能.简单点理解,就是凡是将数据用状态管理模式来存储,在用到该数据的地方,只要一处地方发生变化,另一处也会发生变化,这样就解决了vue中非父子组件…