Vue项目笔记

最新推荐文章于 2022-09-21 11:01:17 发布

小虾Suki

最新推荐文章于 2022-09-21 11:01:17 发布

阅读量432

点赞数

分类专栏：前端开发 Vue.js

本文链接：https://blog.csdn.net/qq_39108466/article/details/100883374

版权

这篇博客记录了Vue项目的配置细节，包括简化资源目录、Vue终端命令、屏幕适应、px转rem、引入jQuery、处理图片路径、解决跨域问题以及后台数据的GET和POST请求。主要涉及Vue CLI、Webpack配置和axios的使用。

摘要由CSDN通过智能技术生成

仅作个人项目笔记记录。

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