题前话:之前接手了我们公司的半成品Vue项目，由于自己不是做网页前端的，自己初步看了下Vue相关东西，今天才算是把基本项目功能都完成了。这里记录下初步学习Vue过程。
相关学习
Vue 官网，我们第一步就需要在官网了解和学习Vue基本知识面，并可以按照官网新建我们第一个Vue文件。
这里我简单记录了下我初步学习vue中用到比较多的属性：
v-bind
缩写：：
动态地绑定一个或多个特性，或一个组件 prop 到表达式。
在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。
在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。
v-on
缩写： @
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个event)"。
从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。
v-model
限制：
- <input>
- <select>
- <textarea>
- components
在表单控件或者组件上创建双向绑定
slot-scope
用于将元素或组件表示为作用域插槽。特性的值应该是可以出现在函数签名的参数位置的合法的 JavaScript 表达式。这意味着在支持的环境中，你还可以在表达式中使用 ES2015 解构。它在 2.5.0+ 中替代了 scope。可参考作用域插槽。已经被v-slot代替掉了
基础的vue知识学完之后，因为我们需要开发一个Vue项目，这里我们就需要用到下面的一个插件：
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。在这里我们可以按照指导来搭建一个我们自己的项目了。
- 我们使用
npm install -g @vue/cli下载这个工具， - 使用
vue create hello-world命令创建一个项目
或者通过vue ui命令以图形化界面创建和管理项目。
为了更好构建单页面应用，控制不同页面，我们需要下面路由插件：
Vue Router 是 Vue.js 官方的路由管理器，可以让我们方便快捷管理界面。
为了更好的进行数据监控，我们也需要下面状态管理器插件：
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）
vue开发中，需要用到各种功能，比如地址选择器，商品列表啊，我们可以自己写，但有些功能我们可以用比较完善的第三方vue组件库：
vue手机端界面我主要用到:Vant
Vant 是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。目前已有近 50 个组件，这些组件被广泛使用于有赞的各个移动端业务中。 Vant 旨在更快、更简单地开发基于 Vue 的美观易用的移动站点
vue 电脑端我主要用到:Element
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
调试相关用到：vue-devtools
允许你在一个更友好的界面中审查和调试 Vue 应用。可以显示vue的数据结构。
这个很方便快捷：
就我公司项目进行简单说明：
页面管理 router
使用Vue Router 管理所有界面。
把所有页面放到一个.js文件中：
其实更好的方式是this.$router.addRoutes方式动态注册
页面路由
数据状态响应
使用Vuex中的Getter和Mutation来进行数据状态管理。类似下面这种：
getters
Mutation
state
注册绑定
界面传值
界面传值我基本上使用Vue Router 的params和query属性操作的。具体可参考vue $router 路由传参的4种方法详解
网络请求
网络请求这块用了axios
对axios进行了简单封装：
axios
最后我们需要使用命令 npm run build打包生成一个dist文件夹，然后把这个打包好的文件部署到服务器上即可。
写着写着感觉写的有点乱了唉。。，最后实现的公司vue项目手机端效果如下：
手机端效果图
电脑端效果图
网友评论