Category Archives: Vue

场景：

vue2x的时候使用npm run dev来进行vue开发

vue3x改为npm run serve

那具体什么时候用serve什么时候用dev呢？

你需要查看package.json里面的scripts的配置

参考：https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F

参考：https://cli.vuejs.org/zh/config/#vue-config-js

//修改config/index.js
    
    proxyTable: {
      '/demo': {
        target: "https://blog.phpfs.com",
        changeOrigin: true,
        // pathRewrite: {
        //   '^/': '/'
        // }
      }

    },
//使用
 mounted () {
    var _this = this
    axios.get('/demo/demo.json').then(response => {
      console.log('返回数据', response.data)
      if (response.data.code === 0) {
        _this.$data.bannerItems = response.data.data.bannerItems
      }
    }).catch(error => console.log(error))
  },
//实际请求的接口地址是
https://blog.phpfs.com/demo/demo.json

PS:配置之后执行yarn run dev即可生效

使用axios访问API

一、按需引入
1、安装
yarn add axios

2、导入
import axios from ‘axios’

3、使用
  mounted: function () {
    // 按需引入
    axios.get(‘https://api.coindesk.com/v1/bpi/currentprice.json’).then(response => {
      console.log(‘按需引入’)
      console.log(response.data)
    }).catch(error => console.log(error))
  },

二、全局引入
1、全局引入-结合Vueaxios
1.1安装
yarn add axios vue-axios

1.2入口文件导入
import VueAxios from ‘vue-axios’
import axios from ‘axios’

Vue.use(VueAxios, axios)

1.3使用
  mounted: function () {

    // 全局使用vue-axios
    this.axios.get(‘https://api.coindesk.com/v1/bpi/currentprice.json’).then(response => {
      console.log(‘全局引入’)
      console.log(response.data)
    }).catch(error => console.log(error))
  },

2、全局引入-使用原型属性（不推荐）
2.1安装
yarn add axios

2.2入口文件导入
import axios from ‘axios’

更改属性
Vue.prototype.$axios = axios

2.3使用
mounted: function () {
    // 全局使用prototype
    this.$axios.get(‘https://api.coindesk.com/v1/bpi/currentprice.json’).then(response => {
      console.log(‘全局引入2’)
      console.log(response.data)
    }).catch(error => console.log(error))
  },

3、全局引入-结合vuex
3.1安装
yarn add vuex

3.2入口文件引入
import Vuex from ‘vuex’
import axios from ‘axios’

Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    num: 1
  },
  actions: {
    // 封装一个 ajax 方法
    test () {
      axios({
        method: ‘get’,
        url: ‘https://localhost:8080/test.json’,
        data: {}
      }).catch(error => { console.log(‘错误提示’, error) })
    }
  }
})

3.3使用
   methods: {
    submitForm: function () {
      console.log(‘被点击’)
      this.$store.dispatch(‘test’)
    }
  }

vuex插件手册
https://vuex.vuejs.org/zh/

{
  "editor.rulers": [
    120
  ],
  "editor.wordWrapColumn": 120,
  "editor.lineNumbers": "on", //打开行号
  "editor.quickSuggestions": {
    //开启自动显示建议
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.tabSize": 2, // tab空格
  "editor.formatOnSave": true, //保存时自动格式化
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,
      "semi": false
    }
  },
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // eslint
  "eslint.autoFixOnSave": true, //保存时自动将代码按ESLint格式进行修复
  "eslint.enable": true,
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue",
      ".ts",
      ".tsx"
    ]
  },
  "eslint.validate": [
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  }
}

1、全局安装
yarn add element-ui -S

2、入口js导入
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’

3、使用
Vue.use(ElementUI)

4、页面使用组件
 <el-button>默认按钮</el-button>

更多参考：
https://element.eleme.cn/#/zh-CN/component/installation

PS:
Image图片属性fit说明
fill 被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比，那么该对象将被拉伸以适应
contain 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加黑边
cover 被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应
none 被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应
scale-down 内容的尺寸就像是指定了none或contain，取决于哪一个将导致更小的对象尺寸

Vue引入静态资源<a href="https://cli.vuejs.org/zh/guide/html-and-static-assets.html#%E5%A4%84%E7%90%86%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90">官方文档</a>&nbsp;

1、在js被导入或者在vue的template以及css中通过相对路径引入的，这样会被webpack处理

 2、放在public通过绝对路径引入，这类资源将会直接被拷贝 

引入图片示例 

1、相对路径引入

<img src="../assets/img/logo.png" />
//经过编译之后
<img src="data:image......." /> 

2、使用v-bind指令  

<img :src="require('../assets/img/logo.png')" />
<img :src="imgUrl" />
//在js定义imgUrl属性
imgUrl:'http://blog.phpfs.com/xxxx.png'

使用:src是v-bind:src的缩写，这样的是后面是可以写变量，注意如果变量是相对路径引入的图片，这样的也不会编译

3、使用绝对路径引入 

<img src="/static/img/icon.png" />
编译后
<img src="/static/img/icon.png" />

用绝对路径引入图片资源都会简单复制到编译后的目录中，不经过webpack处理。

修改build/utils.js

const glob = require('glob')
const modulesPath = path.resolve(__dirname, "../src/modules")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const merge = require('webpack-merge')

// 多入口配置
exports.entries = function () {
  // 获取modules文件夹下所有目录下的main.js文件--入口文件
  var entryFiles = glob.sync(modulesPath + '/*/*.js')
  var map = {}
  // 遍历入口文件
  entryFiles.forEach((filepath) => {
    var filename = filepath.substring(filepath.lastIndexOf('/') + 1, filepath.lastIndexOf('.'))
    map[filename] = filepath
  })
  return map
}
// 多入口页面输出
exports.htmlPlugin = function () {
  var entryHtml = glob.sync(modulesPath + '/*/*.html')
  var arr = []
  entryHtml.forEach((filepath) => {
    var filename = filepath.substring(filepath.lastIndexOf('/') + 1, filepath.lastIndexOf('.'))
    var conf = {
      template: filepath,
      filename: filename + '.html',
      inject: true,
      chunks: ['manifest', 'vendor', filename]
    }
    // 生产环境特殊配置
    if (process.env.NODE_ENV === 'production') {
      conf = merge(conf, {
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotos: true
        },
        chunksSortMode: 'dependency'
      })
    }
    arr.push(new HtmlWebpackPlugin(conf))
  })
  return arr
}

修改webpack.base.conf.js 

只修改entry配置

 // 配置多入口
 entry: utils.entries(),

修改webpack.dev.conf.js 

屏蔽原有的HtmlWebpackPlugin

添加如下代码

修改wenpack.prod.conf.js(参考webpakc.dev.conf.js修改)

【代码下载】

demo

使用步骤：

1、打开目录执行yarn install

2、执行yarn run dev

<template>
  <div class="page-list">
    <span class="list-txt">{{ title }}</span>
    <!-- <ex-btn
      v-if="current == 'ex-btn'"
      v-on:myClick="myClick"
      :msg="msg"
    ></ex-btn>
    <ex-btn2 v-else v-on:myClick="myClick" :msg="msg">
      <img slot="icon" src="xxx.png" />
    </ex-btn2> -->
    <component
      keep-alive
      :is="current"
      v-on:myClick="myClick"
      :msg="msg"
    ></component>
  </div>
</template>
<script>
import btn from './button.vue'
import btn2 from './but2.vue'

export default {
  props: {
    title: { default: '标题' },
    msg: { default: '按钮' },
    current: { default: 'ex-btn' }
  },
  components: {
    'ex-btn': btn,
    'ex-btn2': btn2
  },
  methods: {
    myClick: function () {
      console.log('按钮被点击')
      this.$emit('myClick')
    }
  }
}
</script>

//使用
<template>
  <div id="list">
    <ex-list current="ex-btn2" title="标题1" msg="按钮1"></ex-list>
    <ex-list current="ex-btn" title="标题2" msg="按钮2"></ex-list>
    <ex-list
      current="ex-btn"
      title="标题3"
      msg="按钮3"
      v-on:myClick="test"
    ></ex-list>
    <ex-list
      ref="btnlist"
      current="ex-btn"
      title="标题4"
      msg="按钮4"
      v-on:myClick="test"
    ></ex-list>
  </div>
</template>
<script>
import myList from '../../components/demo/list.vue'
export default {
  name: 'list',
  components: {
    'ex-list': myList
  },
  methods: {
    test: function () {
      console.log('自定义')
      console.log('属性', this.$children)
      console.log('属性', this.$refs.btnlist.title)
    }
  },
  beforeCreate: function () {
    console.log('beforeCreate')
  }, // 组件实例化之前
  created: function () {
    console.log('created')
  }, // 组件实例化了
  beforeMount: function () {
    console.log('beforeMount')
  }, // 组件写入dom结构之前
  mounted: function () { // 组件写入dom结构了
    console.log('mounted')
    console.log(this.$children)
    console.log(this.$refs)
  },
  beforeUpdate: function () {
    console.log('beforeUpdate')
  }, // 组件更新前
  updated: function () {
    console.log('updated')
  }, // 组件更新比如修改了文案
  beforeDestroy: function () {
    console.log('beforeDestroy')
  }, // 组件销毁之前
  destroyed: function () {
    console.log('destroyed')
  }// 组件已经销毁
}
</script>