- created mounted区别：
created运行时，还未挂载到DOM，不能访问到$el属性，可用于初始化一些数据，但和DOM操作相关的不能在created中执行；monuted运行时，实例已经挂在到DOM，此时可以通过DOM API获取到DOM节点
- vue-cli项目引入axios
安装axios：
npm install axios --save
只需要在需要的vue文件中引入axios就可以。
import axios from 'axios'
比如：
<script>
import axios from "axios";
export default {
name: "HelloWorld",
data() {
return {
msg: "Welcome to Your Vue.js App"
};
},
mounted() {
axios
.get("http://localhost:50501" + "/getSign")
.then(function(response) {
alert(JSON.stringify(response.data.result));
})
.catch(function(err) {
alert(err);
});
}
};
</script>
也可以在webpack.provideplugin里面配置全局引用
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery",
axios: 'axios'
})
],
这样就可以不用在用到axios的vue文件里import axios
- vue-cli工程支持less:
需要安装相关插件，但不需要配置loader，已经默认配置好
npm install less less-loader --save-dev
webpack项目里，如果在css中引用图片，直接用地址，在js中引用图片，需要用require
-
v-html标签可以让字符串里的html内容得到解析
Vue组件懒加载
- 默认情况下，组件是在router/index.js头部这样加载的：
import index from '@/components/index'
@代表"src"，在配置文件中默认配置了别名:
resolve: {
.......
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
这种写法会在加载首页时，加载所有组件，导致首页加载过慢，出现白屏
- 组件懒加载是在组件需要使用的时候才加载，不是在router/index.js头部就import，而是在路由表中import
const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
}
]
})
- 用push进行路由跳转时，query里的字段会转为字符串
比如下面的isHtmlTask boolean会转为"ture/false"
let isHtmlTask = (taskType == 2?true:false);
vueapp.$router.push({
name: "taskdetail",
query: {
taskid: taskid,
isHtmlTask:isHtmlTask
}
});
