场景:
vue2x的时候使用npm run dev来进行vue开发
vue3x改为npm run serve
那具体什么时候用serve什么时候用dev呢?
你需要查看package.json里面的scripts的配置
场景:
vue2x的时候使用npm run dev来进行vue开发
vue3x改为npm run serve
那具体什么时候用serve什么时候用dev呢?
你需要查看package.json里面的scripts的配置
//修改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>
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修改)
【代码下载】
使用步骤:
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>