Powered by ThinkBig
一、关于webpack版本
因为我安装的webpack版本是4.0以上的版本，所以踩了不少坑，出现各种奇怪的bug
webpack官网自称4.0最大的特点就是零配置，4.0+版本除了要安装webpack以外，还要安装webpack-cli脚手架，但是我们自己做项目不可能不去手动配置webpack
所以还是建议使用weback3，
如果已经安装了webpack4.0+的版本，使用npm uninstall -g webpack进行全局卸载
再使用npm install -g webpack@3.6.0
安装webpack3.6.0
同时，webpack必须同时兼容webpack-dev-server,webpack-dev-middlewaer等各种依赖的版本
这里我安装的是webpack-dev-server2.8.2，webpack-dev-middleware3.0
如果需要同时还要兼容其他依赖的版本，可以根据报错或者提示去下载更低或者更新版本的依赖（我这里建议大家下载低版本的依赖）
比如我们想使用webpack打包一个文件，4.0+版本却不能使用
webpack源文件相对路径 目标文件相对路径
这种方式去打包输出一个文件，而webpack3的版本可以实现
所以这也是我个人不建议使用4.0+版本的原因之一吧
还有最重要的是，我们经常会碰到npm run dev报错运行不了，
在这里我总结了两点原因：
1.依赖未及时更新
解决方案：把node_modules目录整个删掉，再重新npm install下载一份依赖
2.假如方法1无法解决，那就是因为版本不兼容的问题了，你可以试着更改webpack版本（建议用webpack3,，不建议使用webpack4），对于你的webpack版本，下载更低或者更新你的其他相关依赖，如：webpack-dev-server的版本
我们可以根据这个网址上提供的信息找到各种依赖的版本信息https://www.npmjs.com/
二、nrm的使用
nrm简单来说就是它提供了一些最常用的 npm 包镜像的地址，能够让我们快速的切换安装包时候的服务器地址
使用npm i nrm -g进行全局安装
nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址
从这里我们知道，我们正在使用的是名称为taobao，地址为https://registry.npm.taobao.org的镜像
如果我们想使用其他镜像，可以使用nrm use镜像名称 的方式进行切换
三、关于处理异步
以前我在学vue的时候，使用的是vue-resource，最近几天在CSDN看到，vue2.0以后已经停止更新vue-resource，现在vue已经出到3.0了，很多大型项目处理ajax请求也用的是axios，然后使用vuex管理数据
那什么是vuex呢？
虽然我现在对于vuex也接触不深，我个人对于vuex的理解就是一个放在内存中的仓库，它专门为vue.js应用程序开发的状态管理模式，采用集中式的存储管理所有组件的公共状态，并以相应的某些规则去保证状态以一种可预测的方式发生改变。
假设有这样一个场景，比如一个Vue的根实例下面有一个根组件名为App.vue, 它下面有两个子组件A.vue和B.vue, App.vue想要与A.vue或者B.vue通讯可以通过props传值的方式, 但是如果A.vue和B.vue之间的通讯就很麻烦了, 他们需要共有的父组件通过自定义事件进行实现
vuex就是用于这个问题的，就像上述的情况，我们可有在全局声明一个Vuex.Store({})对象，
在这个对象下，有一个state对象属性，简单来说state就是Vuex中的公共的状态，相当于我们平时写的vue实例中的data属性，用与保存组件中的公共数据
此时我们就可以把App.vue中的两个组件共同使用的data抽离出来, 放到state中,代码如下:
//main.js
import Vue from 'vue'import App from './App.vue'import Vuex from 'vuex'
Vue.use( Vuex )
const store = new Vuex.Store({
state:{
products: [
{name: '鼠标', price: 20},
{name: '键盘', price: 40},
{name: '耳机', price: 60},
{name: '显示屏', price: 80}
]
}
})
new Vue({
el: '#app',
store,
render: h => h(App)
})
//A.vue
export default {
data () {
return {
products : this.$store.state.products //获取store中state的数据
}
}
}
//B.vue
export default {
data () {
return {
products: this.$store.state.products //获取store中state的数据
}
}
}
这样我们通过state就可以存储公共数据，不用自定义props去调用数据，减少了不少的代码量，也更加方便操作
具体对于一些Vuex的理解后序我会继续深入去了解再给大家分享吧
网友评论