Vue项目笔记

仅作个人项目笔记记录。

2018-09-29 Saturday

简化项目中的资源目录： cli中默认定义了’@'代表“src”目录，故项目代码中直接可以用“@”替代src。

自定义路径简写如styles目录“src/assets/styles”，在webpack.base.conf.js中module.exports > resolve：

resolve: {
   
    extensions: ['.js', '.vue', '.json'],
    alias: {
   
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'styles': resolve('src/assets/styles'),
      'common': resolve('src/common'),
    }
  }

使用：

PS：在中使用简写的路径，需要在简写名前加“~"(@import ‘~styles/varibles.styl’)，在js中使用不需要:

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .header
    position: relative
    overflow: hidden
<style>

2018-09-26 Wednesday

vue 终端常用命令：

cnpm install // 安装项目中所需要的包
cnpm run dev // 开发中运行vue 项目
npm run build // 打包项目

1.屏幕适应，在index 文件head中加入：

<script>
      //屏幕适应
      var evt = "onorientationchange" in window ? "orientationchange" : "resize";
      window.addEventListener(evt, resizefn, false);//添加屏幕旋转事件
      function resizefn() {
   
        var html = document.documentElement;
        var k = 375;
        var r=html.clientWidth / k