一 在Vue项目,要让app组件的height铺满整个窗口,单独设置 height:100%; 是不会生效的;有两种方法:
第一种是设置height:100vh;
第二种是引入reset.css文件,在里面设置body,html{height:100%;}
二 在调试程序的时候,有时候希望通过console输出某个值,当这个值是对象的时候,用下面的写法能知道具体的值,而不是返回[object Object]
console.log('handleMapSingleClick', coor);
三 vue 路由:
在一种很常见的场景,有登录页login.vue, 有登录成功之后的界面.其中登录界面和其他的界面不一样.此时可以使用子路由.login.vue 使用一个场景,然后把其他界面相同的抽离成一个 vue 文件组成和 login.vue 并列的路由,在次路由下形成父子路由的形式,相当简洁,避免了在 app.vue 做命名视图的需要.虽然命名视图也能解决这种场景.fy3这个项目就是这样设计的,可以参考.
四 项目初始化:
1,使用
render: h => h(App);
来替代:
template:'app',components:{App}; 注意:模板的标签需要小写;
2,全局注册地图组件,把 map 文件夹引入项目目录,然后在 main.js 全局注册:
安装 openlayers和 moment插件:
cnpm install openlayers moment --save
import mapComponents from '././map' //没有具体的文件,则默认引入 map 文件夹下的 index.js 文件
Object.keys( mapComponents).forEach(key => {
let name =key.replace(/\w/, v => v.toUpperCase()
Vue.component(`ol${name}`,mapComponents[key])
})
3,elementUi的使用:
安装: cnpm install element-ui --save
引入: import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';//这个不能丢
使用: Vue.use(ElementUI);
4, 引入reset.css,iconfont.css等文件
引入css文件要注意,在js文件中直接 import 'xx.css' 就可以
在vue文件中,需要在style标签通过 @import 'xx.css' 引入,如果在webpack的resolve设置了alias,则需要这样:@import '~@/xx.css',需要用一个 ~来操作
reset.css可以在main.js中引入,也可以在index.html中link方式引入.
字体图标文件引入:
1,字体文件夹下包含 .eot,.svg,.ttf,.woff,.css 这几类文件
2,在头文件中引入css文件,该文件包含
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1517912925311'); /* IE9*/
src: url('iconfont.eot?t=1517912925311#iefix') format('embedded-opentype'), /* IE6-IE8 */}
五 关于路由,子路由,路由守护等.路由的使用和基本框架
在一种很常见的场景,有登录页login.vue, 有登录成功之后的界面.
其中登录界面和其他的界面不一样.此时可以使用子路由.login.vue 使用一个场景,然后把其他界面相同的抽离成一个 vue 文件组成和 login.vue 并列的路由,
在此路由下组成父子路由的形式,相当简洁,避免了在 app.vue 做命名视图的需要.虽然命名视图也能解决这种场景.
import Vue from 'vue';
import Router from 'vue-router';
import 'zizujian';
Vue.use(Router)
const router = new Router({
routes:[
{
path:'d',
meta:{},
name:''';
component:xx,
children:[
{
path:'d',
meta:{},
name:''';
component:xx
}
]
}
]
}
)
六 stylus的安装使用
安装:
npm install stylus -D
npm install stylus-loader -D
或者
cnpm install stylus stylus-loader -D
使用:
七 axios 的安装和使用
安装 cnpm install axios --save
使用 哪里需要直接 import Axios from 'axios'
八 懒人移动适配方法: 使用 postcss-px2rem 插件
1,安装 cnpm install postcss-px2rem --save-dev
2,在postcssrc.js 添加 ""postcss-px2rem": {remUnit: 37.5} //37.5为设计稿尺寸
3,在 reset.css 设置 html{
font-size: 10vw;
}
九 webpack打包无法识别图片的相对路径问题
在某个组件中(此处是 app.vue) 设置了图片( background 或者 img), 用的是相对路径,结果在打包完之后,路径没办法直接对应.
1,首先理清路径的区别:
__dirname: 总是返回被执行的 js 所在文件夹的绝对路径
__filename: 总是返回被执行的 js 的绝对路径
process.cwd(): 总是返回运行 node 命令时所在的文件夹的绝对路径
./ : 在 require() 中使用是跟 __dirname 的效果相同，不会因为启动脚本的目录不一样而改变，在其他情况下跟 process.cwd() 效果相同，是相对于启动脚本所在目录的路径。
找到一篇文章:关于 webpack 打包时候图片路径出问题的解决
十 vue-cli脚手架搭建的目录修改
1,需要把 config 文件夹的 index.js中 build 对象的assetsPublicPath修改为'./';
2,build 文件夹下的 utils.js中generateLoaders的publicPath修改为:'../../';(这个修改可以解决背景图片不加载的问题)
3,把 webpack.prod.conf.js中HtmlWebpackPlugin这些配置可以适当修改.
4,在webpack.base.conf.js的resolve对象下加入:
alias: {
'@': resolve('src'),
}
这样@就指代src文件夹了,可以节省好多写相对路径的时间
5, vue-cli全局安装
cnpm instal vue-cli -g
vue init webpack xxx(文件夹名称)
11，在index.html文件中加入meta标签：
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'>
如果移动端是两倍屏或者三倍屏,那么scale要变成0.5或者0.3
12. echarts使用:
和 axios 类似，echarts 也不能通过 Vue.use() 进行全局调用,通常是在需要使用图表的 .vue 文件中直接引入.所以还需要安装vue-echarts辅助.
安装: cnpm install echarts vue-echarts --save
引入:
import ECharts from 'vue-echarts/components/ECharts.vue'
// 按需引入
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
// 全局注册
Vue.component('echarts', ECharts)
使用:
传入参数就可以使用了.
网友评论