Vue currently has two main development modes:
1. Direct page-level development, script is directly introduced into Vue
2. Engineering development, webpack+loader or directly using the scaffolding tool Vue-cli, the files in it are all configured
Webpack can be configured, configure multi-file entry, and perform multi-page development
The second type of Vue development, combined with webpack packaged files, will be very large, how to solve this problem?
1. Webpack code splitting: code-spliting
2. Extract public (such as extracting css, js)
3. Pre-rendering: use prerender-spa -plugin plug-in
4. Background —— Turn on compression, gzip (will be useful)
5. Load components asynchronously: require.ensure
Vue common error solutions:
1.[Vue-warn]: Missing required prop: "to" (found in component <router-link>)
This error is that <router-link> is missing a to or is wrong, the correct way to writeis: <router-link to="/home">
and when routing is doing string splicing, to should be bound as an attribute <router-link :to="'/home/'+item.id">
2. Port conflict error: need to change the port
Of course, the webpack in vue2.0 will correct itself according to your port number, and it will increase from 8080 to the back, and
there will be no port number conflict. In vue1.0, it will be occur frequently
3.[Vue-warn]:Unknown custom element: <router-link> - did you register the component correctiy?
Error 1: The imported vue-router has no use()
import Vue from 'vue'
import VueRouter from 'vue- router'
Vue.use(VueRouter);
Error 2: After the routing instance is generated, the route is not attached to our Vue instance
const router=new VueRouter({
mode:'history',//Switch the path mode and become history mode, otherwise the path is /#/home
scrollBehavior:()=>({ // The behavior of scroll bar scrolling, without this default, the original scroll bar position will be remembered
y:0
}),
// Note the name
routes here
});
new Vue({
/* 4. Finally hang on vue */
router,
el: '#app',
render: h => h(App)
});
4.Uncaught TypeError: _vuex2.default.store is not a constructor
This error is that _vuex2.default.store is not a constructor
Because when we use vuex, we need to export the actions and mutations modules that we will use
. When the Store in new Vuex.Store is lowercase, it must be capitalized here, which
is equivalent to capitalizing the first letter when we use the constructor (class).
import mutations from './mutations.js'
import actions from './actions.js'
export default new Vuex.Store({ //Vue.Stroe() capitalize the first letter
modules:{ //Note that mutations export a module
mutations
},
actions
});
5. Moudel not found:Error:Can't resolve "style" in 'D:\vue-demo'
在vue1.0中，在webpack.config.js中配置css文件时
module:{
loaders:[
{
test:/\.css$/,
loader:'style!css'
}
]
}
在vue2.0中，在webpack.config.js中配置css文件时，必须要写全，不能和vue1.0一样简写
module:{
rules:[ //这里改成了rules
{
test:/\.css$/,
loader:'style-loader!css-loader' //这里必须要写全，不能和vue1.0一样简写
}
]
}
6.组件之间的通信从1.0过渡到2.0时引发的错误：
vue1.0实现父子组件的通信 -->通过props属性-->并且子组件可以更改父组件的数据 通过sync同步
当在vue2.0里面不允许直接给父级数据做更改,并且把这个方法.sync去掉了，
当子组件再试图更改父组件的数据时，就会报错。
解决方法：
1.$emit()——单一事件管理
经常遇到的问题是找不到$emit()或$on(),这时需要单独准备一个文件Store.js
在文件里面需要:var oEvent =new Vue();
这个这个文件里的数据一定要导出去才可以使用：export default oEvent
2.对象之间的引用：(推荐使用)
vue1.0传数据：msg:'welcome' -->传给子级
vue2.0直接将数据定义成对象json的形式，这样传给子级的数据是对象的属性，即msg.title
这样子级修改父级的数据，修改的也是这个对象的一个属性msg.title
msg:{
title:'welcome'
}
msg.title
7.用vuex用来管理组件状态：（增加/减少，显示/隐藏）
8.axios目前不可以use，因为axios里面没有install这个方法
使用axios的时候，可以这样来使用：
1.将axios导入文件
import axios from 'axios'
2.将axios放入到Vue实例上面，这样在其他组件中，可以直接通过this.$https.get/post使用
在main.js中写：Vue.prototype.$http = axios
其他组件可以直接使用：
this.$http.get('data.txt').then((res)=>{
console.log(res.data);
}).catch((err)=>{
console.log(err);
});
10) element.ui表头点击事件
使用element.ui之后 @click="" 无法对表头等元素添加点击事件，正确的写法应该是@click.native=""
11)webpack2.0 插件的配置需要放到 plugins里面进行配置，不可放到rules里面进行配置