Vue 项目搭建流程和使用大全
Vue 项目搭建流程及项目中遇到的问题
项目搭建流程
1.使用vue cli 搭建项目框架
cnpm -g vue-cli 安装vue cli 脚手架
vue init 创建项目
cd
cnpm 安装依赖模块
2.使用 vue
cnpm vue --save
3.使用vue /axios
作用：请求数据
项目引用： from "vue "
全局使用：Vue.use()
axios使用同理
vue 与axios的异同
相同点：都是请求数据
不同点：vue 是vue 1.0开始使用的
axios是vue 2.0中使用 但是没有jsonp请求
4.使用基于Vue.js的移动端组件库 mint-ui
cnpm mint-ui --save
全局使用 mint ui
from "mint-ui"
Vue.use()
使用前需要安装引入的组件样式 cnpm babel-- -D
然后在中添加设置
"plugins": ["transform-runtime", ["component", [{"libraryName": "mint-ui","style": true}]]]5.项目运行打包
(1) cnpm run build 生成dist文件夹，将这个文件夹放在服务器上即可
(2) 如果我们想在本地运行使用，可以使用http-
因为在项目中设置了服务器代理，本地是无法代理到数据的，所以我们需要开启代理服务
npm init
cnpm http-proxy- --save
创建一个 .js 在里面写下面图片的代码
开启服务 node
项目中遇到的问题
1.设置代理请求
在/index.js
proxyTable: {"/davdian": {"target": "http://bravetime.davdian.com/api","changeOrigin": true,"pathRewrite": { "/davdian": "" }}}post请求的设置
var = JSON.({"os":"wap","opt":1,"cmd":1,"id":"3702"})
//qs. 转换成键值对
//JSON. 直接转换成字符串
//axios 和 vue-的使用方法一样
axios.post("/ashx",params,{headers:{'Content-Type': 'application/x-www-form-urlencoded'}}).then(res=>{console.log(res)})2.全局使用需要的模块
Vue.use(“模块名”) 如果这样使用，使用的是中间件
其他模块的全局使用 在Vue这个对象的原型上添加这个模块
qs from "qs"
Vue..$qs = qs;
3.使用vue
vue中已经添加过该原型 this.$.() 即可
4.vue中事件需要主动传递 $event 事件对象 @click = "($event)"
键盘事件 @keyup 键值绑定事件 @keyup.13 = "show()" 其中13是enter的键值
函数节流问题:（键盘事件，每输入一个键值，就会有事件发生，会造成大量请求数据，给服务器造成压力）
this.timer = clearTimeOut();this.timer = setTimeOut(()=>{在这里进行数据请求},500)5.组件之间的数据传递
父子之间数据传递：利用props
父组件：获取值
子组件接收值
父子、子父之间事件传递 主要通过事件将数据传递给父组件
6.icon图标的引用
（1）在阿里图标中，下载，然后放到静态资源文件中，在main.js 中引入全局的样式，在组件中添加的class
（2）编码的使用 ，需要对其转义
7.的使用回顾
存储：.(key,value)
获取：.(key)
删除：.（key）
项目中的使用问题：
存储数据时，需要将value转化为字符串 JSON.()
获取数据值，需要将其转化为我们需要的数据类型 JSON.parse(),
但是当数据中没有存在时，我们需要兼容 JSON.parse(.(key)||'[]')
8.组件的注册
局部组件：
全局组件：
9.如何给组件定义自动义属性并获取
在vue中，设置自定义属性使用 :data-"属性名"
获取自定义属性值：$event...属性名
10.获取 内部嵌套的的index $event..
VUEX
vuex 是一种状态管理模式，它采用集中式存储管理应用的所有的组件状态 （Vuex的状态存储是响应式的）
状态管理模式
state 驱动应用的数据源
view 将state映射到试图上
响应在view上的state的变化
实例store
state：状态数 在组件中获取Vuex的状态 ：{count（）{ this.$store.state.count}}
帮助计算属性 ...(["count"]) "count"相当于 store.state.count
: 计算store的属性 辅助函数仅仅是将store中的映射到局部计算属性
: 通过提交,更改Vuex的store中的状态,每个都有一个事件类型（type）和一个回调函数（）。
会接受state作为第一个参数
:提交，而不是直接改变state;包含任意异步操作
函数接收一个与store实例具有相同方法和属性的对象，可以通过调用mit提交一个,或者通过.state 和 . 来获取state和。对象不是store对象本身
Vuex的使用过程
Vue from “vue”
Vuex from "Vuex"
Vue.use(Vuex)创建store实例
const store = new Vuex.Store({state:{cartData:[]},getters:{//在Vuex里面进行数据计算,组件中直接通过mapGetter获取careData(state){return state.cartData = cartData;}},//异步数据进行交互的方法，结束以后需要 传给
actions:{getCartData({commit}){Vue.prototype.$axios.post(url).then(res=>{commit("GET_CART_DATA",{cartData：res.data.data})})}},mutations:{GET_CART_DATA(state,{cartData}){return state.cartData = cartData;}},})个人博客： 欢迎小白前来学习，这里有最基础的前端技术学习总结，本人较菜，大神勿喷
