vue项目流程规范化

1、创建config.js文件

2、创建env文件

3、安装axios

npm install axios --save

4、引入css格式化文件（reset/normalize.css）

npm install --save normalize.css 
//main.js引入
import 'normalize.css/normalize.css'

5、引入elementUI

npm i element-ui -S

6、生产环境打包去除打印/警告

下载移除控制台输出的包

npm install babel-plugin-transform-remove-console --save-dev

babel.config.js配置

// 生产环境下清除console打印
const plugins = []
if (process.env.NODE_ENV === 'production') {
  plugins.push('transform-remove-console')
}
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins
};

7、注册公共过滤器

建立filters.js

//日期转换
export function dateFil(timeDate){
    return timeDate.substring(0,19).split("T").join(" ").slice(0,10);
}
//效力状态
export function effectFil(val){
    if(val=="1"){
        return "有效" 
    }else if(val=="0"){
        return "失效"
    }else if(val=="2"){
        return "废止"
    }
}

引用：

{{value|filter}}
//在methods引用
this.$options.filters[filterName](value)

main.js引入

import * as filters from '@/filter/filters';
// 注册过滤器
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

8、如有请求需要参数序列化

需要引入qs插件

//在项目中使用命令行工具输入：
  npm install qs
//安装完成后在需要用到的组件中：
  import qs from 'qs'
//使用：
 qs.parse(data)和qs.stringify(data)

这两种方法虽然都是序列化，但是还是有区别的。
qs.parse()是将URL解析成对象的形式
qs.stringify()是将对象 序列化成URL的形式，以&进行拼接

9、引入swiper

下载依赖

npm install vue-awesome-swiper --save

在 main,js 里引入（全局）:

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
import 'swiper/dist/css/swiper.css'

在组件中引入

import 'swiper/dist/css/swiper.css'    //在全局没引入，这里记得要！
import { swiper, swiperSlide } from 'vue-awesome-swiper'
 
export default {
  components: {
    swiper,
    swiperSlide
  }
}

在vue文件中使用

<swiper :options="swiperOption">
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
export default {
    data() {
      return {
        swiperOption: {
          // 所有的参数同 swiper 官方 api 参数一样
          // 
        }
      }
    },
    ...
  }

例子

参数例子