vue项目结构描述

引入公用css

方法1在mian.js引入import '../static/css/global.css' /*引入公共样式*/

方法2在index.html引入<link rel="stylesheet" href="./static/css/reset.css">

 

性能优化公用css定义变量 这样方便维护  例如改变一个app的主体颜色   直接改变公用变量就好了

<style lang='stylus' scoped>

@import '../../../../static/styles/varibles.styl'//引入公用变量文件的包一定要在<style>标签内  例如定义公用颜色变量：$bgColor = #00bcd4

在当前css这样使用：background: $bgColor;

</style>

 

路径起别名

bulid/webpack.base.conf.js  找到（修改配置要重启）

  resolve: {

    extensions: ['.js', '.vue', '.json'],

    alias: {

      'vue$': 'vue/dist/vue.esm.js',

      '@': resolve('src'),

      'styles':resolve('static/styles')//新起的路径别名

    }

  },

直接这样引入css就好了@import '~styles/varibles.styl'

 

 

在src下面新建components文件夹 放组件

文件夹assets放静态资源例如png图片css代码

文件夹static放静态文件  例如css

安装stylus 
npm install stylus --save
npm install stylus-loader --save
<style lang='stylus' scoped>//scoped只对当前组件css有作用

vue反向代理  后台接口都显示本机IP加接口名字   其实看着是本地ip但实际是后台ip+接口名