一.环境 :NodeJs(npm)
- Mac 无特殊操作 next->next->…->install->finished
- windows 起步安装与Mac无异终端 / cmd
- node -v ->14.16.2 说明安装成功
- npm -v -> 14.16.2 说明安装成功
- windows 需要修改下载及缓存路径,并且配置环境变量
- 修改下载及缓存路径
- 在nodejs 安装目录下新建目录 node-global 和 node_cache
执行命令 :
😈 npm config set prefix "D:\nodejs\node_global
😈 npm config set cache "D:\nodejs\node_cache
2.配置环境变量
💀(1) 用户变量 ->path->将npm配置修改为 : D:\nodejs\node_global
💀(2)用户变量->新建->NODE_PATH-> D:\nodejs\node_mudules\
修改淘宝镜像(npm是从github上下载依赖包,更换淘宝镜像可以提升下载速度)
执行命令 : 😈 npm config set registry https://registry.npm.taobao.org
二.下载安装vue-cli (vue脚手架)
执行命令: npm install vue-cli -g
- npm install 表示下载命令 其中 install 可以简写成 i
- vue-cli 表示下载依赖包的名字 ,如果不写版本,默认下载最新版本
- -g 表示全局下载,如果没有全局下载,安装会自动下载安装到当前目录,也只在当前目录可用
- 执行命令 vue-V->2.9.6 说明安装完成
三.构建项目
😈 执行命令 :vue init webpack projectname
项目初始化配置
- 需要输入的都可以不输入使用默认值
- 按自己的项目需求下载安装依赖
- 多选一的都选第一个 回车
四.运行项目
执行命令
😈 cd projectname
😈 npm run dev
项目在http://localhost:8080 运行(端口占用会尝试在下一个端口运行)
五.项目目录
- build目录:项目构建目录,一般不去修改
- config目录:项目配置目录,项目配置文件
- node_modules目录:项目依赖目录,所有项目依赖包,插件等都下载安装在此目录下
- static目录:存放静态资源,需要绝对路径访问
- src目录:项目主要操作目录
->assets:存放一些资源,需要相对路径访问
->components:组件目录,项目中所需的组件都存放于此
->App.vue:所有的.vue文件都是单独的组件.App.vue是项目的根组件
->main.js:项目的逻辑入口文件,进入全局配置以及根Vue实例的初始化
index.html: 项目的页面入口文件
package.json :项目的配置列表文件 - 补全文件 😆
npm i
六.VUE路由
1.路由安装及使用
路由的机制:router监听了地址栏路径的变化,与路由配置中的path进行了配置,匹配成功将挂载其映射的组件
-
😈
npm i vue-router --save -
在src路径中新建文件夹 如 router 并建立index.js文件 内容如下:
//路由配置 模块 //1.引入相关依赖 //引入Vue import Vue from "vue"; //引入vue-router 依赖 import VueRouter from "vue-router"; //2.全局引入声明,并非所有依赖都可以通过Vue.use方法实现全局引用声明,只有Vue内置模块才可以 Vue.use(VueRouter); //引入路由映射组件 //@表示目录路径src import Material from "@/components/Material"; import Shop from "@/components/Shop"; import Video from "@/components/Video"; // console.log(1111); //3.对VueRouter实例化 并设置配置参数 export default new VueRouter({ //routes,需要一个数组为值,表示路由配置列表 routes: [ //每一个对象即是一条路由配置 { // '/'表示根路径 path: "/", //路由重定向 redirect:'/material', children:[ { name:"Hero", // "/ " 表示根路径 不写斜杠表示当前父路由路径下拼接自身路径为路由路径 // path:"hero",//二级路由不加 / //为目标路由配置动态参数 : 在路由路径后面添加 '/:参数名' 参数名用于在目标路由内读取数据 // path:"hero/:hero", path:"hero", component:Hero }, }, { //当前的路由名称 name: "Material", //路由路径 path: "/material", //路由所映射的组件 component: Material }, { name: "Shop", path: "/shop", component: Shop }, { name: "video", path: "/video", component: Video }, { //"*" 路径表示通配路径,可以匹配任何路径,一定要写在routers列表的末尾,通常用于对不存在路径进行重定向(或者映射自定义的404组件) path:'*', redirect:'/' } ] }); -
在main.js中注册router组件
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' //引入配置好的路由模块 import router from "./router" Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', components: { App }, template: '<App/>', //根Vue实例配置router 可以在全局任意组件中通过 Vue实例的$router属性访问路由实例 router }) -
router的应用
<template> <div id="app"> <!-- 路由的机制:router坚挺了地址栏路径的变化,与路由配置中的path进行了配置,匹配成功将挂载其映射的组件 --> <!-- router 提供的组件: 1.router-link :用于更改路由路径 属性: (1)to:指定路由目标 1.直接设置为路由路径 2.设置为object,对象通过name 指定指定路由名称 3.设置为object 对象通过path指令 指定路由路径 (2)tag:指定router-link 最终渲染dom的类型 默认为 'a' 标签 可以通过 router-link-exact-active router-link-active 来指定路由的选中样式 --> <nav> <router-link to="/material" tag="h3">资料</router-link> <router-link :to="{name:'Shop'}" tag="h3">商城</router-link> <router-link :to="{path:'/video'}" tag="h3">视频</router-link> </nav> <!-- router 提供的组件 2.router-view:作为路由连接所映射组件的出口(载体) --> <router-view></router-view> </div> </template> <script> export default { name: "App", components: {} }; </script> <style> </style>
2.路由之间的传值
路由传参:
-
动态参数传值需要在路由配置中为目标路由设置动态参数
//子路由配置 { path: '/child/:id', component: Child } //父路由编程式传参(一般通过事件触发) this.$router.push({ path:'/child/${id}', }) -
通过name传值 将数据存与params参数中 默认通过name传参不需要动态参数,数据也不会体现在地址栏,因此刷新页面重载组件后数据会丢失,如果不希望数据丢失,需要配置动态参数
<router-link :to="{name:'Child',params:{id:123}}">进入Child路由</router-link> -
通过path传值 ,不能配置动态参数 并且使用path是router会自动忽略params 取而代之的是query .以参训参数形式将数据拼接在路径后,在目标路由组件中,通过query取值
//子路由配置 { path: '/child, name: 'Child', component: Child } //父路由编程式传参(一般通过事件触发) this.$router.push({ name:'Child', params:{ id:123 } }) this.$router.push({ name:'Child', query:{ id:123 } })取值
在目标路由组件中，通过 $route 来读取动态参数携带的数据，数据存储在了 $route 对象的 params 属性中： <div>{{this.$router.params.id}}<div> 通过path传值，数据以查询参数形式拼接在路径后，不能通过params取值，需要使用query取值 <div>{{this.$router.query.id}}<div>
3.路由守卫
-
全局守卫
全局前置守卫: 任意路由跳转都会触发全局前置守卫
router.beforeEach((to, from, next) => { // to: 目标路由对象 // from: 源路由对象(触发路由的路由对象) // next: 是一个函数，必须调用 next() 方法才能继续路由，否则路由将在守卫里终止 // next() 方法除直接调用外，还可以传入路由路径来重定目标路由 // 可以通过为 next() 方法传一个对象，来指定其他路由设置 // （1）replace: true，不生成记录 // （2）通过 query 携带参数 if (to.name == 'Mine' && !sessionStorage.getItem('LOGIN')) { next({ path: '/login', // replace: true query: { id: '001' } }); } else { next(); } }); -
全局后置守卫: 任意路由跳转完成时触发，没有next
router.afterEach((to, from, next) => {
console.log('afterEach');
console.log(to);
console.log(from);
});
- 路由独享守卫: 只有当前路由触发时触发
beforeEnter(to, from, next) {
if (sessionStorage.getItem('LOGIN')) {
next();
} else {
next('/login');
}
}
- 组件及路由守卫: 当映射该组件的路由触发时触发
// 组件及路由守卫: 当映射该组件的路由触发时触发
beforeRouteEnter (to, from, next) {
if(sessionStorage.getItem("LOGIN")){
next()
}else{
alert("登录后查看")
}
console.log('beforeRouteEnter');
next();
// console.log(this); // undefined
// 可以通过 next() 方法设置回调函数，通过回调函数访问 Vue 实例
next(vm => console.log(vm.$el))
},
-
路由离开当前组件时触发
beforeRouteLeave(to,from,next){ console.log('beforeRouteLeave'); },
4.路由懒加载
将组件引入,但需要路由触发才会渲染组件,如果组件较多会导致项目初次加载速度很慢,因此不建议将所有路由意映射组件都提前加载,应当只加载少量必须组件,其余组件都应当按需加载(路由懒加载) 优化vue项目初次加载速度
{
name: "Root",
path: "/root",
//component: Root
component: () => import("@/components/Root")
},
4.编程式导航
// 1. push()：参数值与 router-link组件 的 to 属性值相同
this.$router.push('/material');
this.$router.push({name: 'Material'});
this.$router.push({path: '/material'});
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
// 2. replace()：用法与 push() 方法完全相同，唯一区别就是不会生成历史记录
this.$router.replace('/material');
// 3. go()：需要 number 的值，正数前进，负数后退
this.$router.go(-1);
七.Vue生命周期
1.生命周期示意图
2.代码过程
<script>
// 引入 TitleBar 组件
import TitleBar from "./components/TitleBar";
import NavBar from "./components/NavBar";
export default {
name: "App",
data() {
return {
title: "图书管理系统",
navList: ["图书列表", "借阅", "历史", "黑名单"],
selIndex: 0
};
},
components: {
// 当前组件的子组件列表，所有子组件引入后都需要在此注册配置，才能在组件模板中使用
TitleBar, // 在当前组件中注册 TitleBar 组件
NavBar
},
methods: {
navFn(i) {
// console.log(`自定义事件'navselect'触发执行方法navFn`);
// console.log(`父组件App中navFn方法接收数据：${i}`);
this.selIndex = i;
}
},
computed: {
selVal() {
return this.navList[this.selIndex];
}
},
//每一个组件都对应一个Vue实例,都可以共享min.js中的Vue实例的属性和方法min.js中的Vue实例是整个项目的根Vue实例
//每个Vue实例都存在生命周期 钩子函数
//生命周期钩子函数 与当前vue实例绑定,内部this指向当前组件Vue实例,因此在声明周期狗子函数内访问vue实例上绑定的属性和方法
beforeCreate() {
//已经完成了vue的实例化但并未完成数据和方法的绑定
console.log("beforeCreate");
console.log(this.$el);//undefined
console.log(this.title);//undefined
console.log("----");
},
created() {/*重点*/
//已经完成Vue实例的数据及方法的绑定,尚未开始DOM的挂载
console.log("created");
console.log(this.$el);//undefined
console.log(this.title);//图书管理系统
console.log("----");
},
beforeMount() {
//根据template 及数据创建虚拟DOM之前触发
console.log("beforeMount");
console.log(this.$el);//undefined
console.log(this.title);//图书管理系统
console.log("----");
},//挂载
mounted() {/*重点*/
//已经完成虚拟DOM结构创建,并完成根据虚拟DOM实现正式DOM结构的挂载
console.log("mounted");
console.log(this.$el);//<div id="App"></div>
console.log(this.title);//图书管理系统
console.log("----");
},
beforeUptate() {
//当Vue实例中数据发生变化时触发,但并未完成根据数据变化更新DOM的工作
console.log("beforeUpdata");
console.log(this.$el);
console.log(this.title);
console.log("----");
},
updated() {/*重点*/
//已经完成了根据数据变化进行的DOM更新工作
console.log("updated");
console.log(this.$el);
console.log(this.title);
console.log("----");
},
beforeDestroy() {
//销毁前
console.log("beforeDestroy");
console.log(this.$el);
console.log(this.title);
console.log("----");
},
destroyed() {
console.log("destoyed");
console.log(this.$el);
console.log(this.title);
console.log("----");
}
};
</script>
3.生命周期概念
Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。
-
beforeCreate（创建前）
表示实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化。
-
created（创建后）
数据对象 data 已存在，可以调用 methods 中的方法，操作 data 中的数据，但 dom 未生成，$el 未存在 。
-
beforeMount（挂载前）
vue 实例的 $el 和 data 都已初始化，挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。data.message 未替换。
-
mounted（挂载后）
vue 实例挂载完成，data.message 成功渲染。内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，DOM 渲染在 mounted 中就已经完成了。
-
beforeUpdate（更新前）
当 data 变化时，会触发beforeUpdate方法 。data 数据尚未和最新的数据保持同步。
-
updated（更新后）
当 data 变化时，会触发 updated 方法。页面和 data 数据已经保持同步了。
-
beforeDestory（销毁前）
组件销毁之前调用 ，在这一步，实例仍然完全可用。
-
destoryed（销毁后）
组件销毁之后调用，对 data 的改变不会再触发周期函数，vue 实例已解除事件监听和 dom绑定，但 dom 结构依然存在。
八.VUE组件传值
父组件向子组件传值：（props 传值）
-
父组件中：为子组件的自定义属性赋值（属性名为子组件中 props 属性声明变 量的变量名）
-
子组件中：通过 props 属性声明的变量接收父组件数据。
子组件中：通过 props 属性声明的变量接收父组件数据。
-
父组件中：通过 v-on 监听子组件中提交的自定义事件，并在事件处理函数中 通过参数接收数据
-
子组件中：在事件处理函数中通过 this.$emit()方法提交自定义事件，并传递数 据；方法第一个参数为自定义事件名，第二个参数为要向父组件传递的参数。
vue的组件传值分为三种方式：父传子、子传父、非父子组件传值
引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递
父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示
1.父传子
子组件的代码：
<template>
<div id="container">
{{msg}}
</div>
</template>
<script>
export default {
data() {
return {};
},
props:{//可以是['attribute name'] {'key'}
msg: String
}
};
</script>
<style scoped>
#container{
color: red;
margin-top: 50px;
}
</style>
父组件的代码：
<template>
<div id="container">
<input type="text" v-model="text" @change="dataChange">
<Child :msg="text"></Child> <!--给子组件props中的属性赋值-->
</div>
</template>
<script>
import Child from "@/components/Child";
export default {
data() {
return {
text: "父组件的值"
};
},
methods: {
dataChange(data){
this.msg = data
}
},
components: {
Child
}
};
</script>
<style scoped>
</style>
2.子传父
子组件代码：
<template>
<div id="container">
<input type="text" v-model="msg">
<button @click="setData">传递到父组件</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: "传递给父组件的值"
};
},
methods: {
setData() {
this.$emit("getData", this.msg);//通过事件触发
}
}
};
</script>
<style scoped>
#container {
color: red;
margin-top: 50px;
}
</style>
父组件代码：
<template>
<div id="container">
<Child @getData="getData"></Child>
<p>{{msg}}</p>
</div>
</template>
<script>
import Child from "@/components/Child";
export default {
data() {
return {
msg: "父组件默认值"
};
},
methods: {
getData(data) {
this.msg = data;
}
},
components: {
Child
}
};
</script>
<style scoped>
</style>
子传父的实现方式就是用了 this. e m i t 来 遍 历 g e t D a t a 事 件 ， 首 先 用 按 钮 来 触 发 s e t D a t a 事 件 ， 在 s e t D a t a 中 用 t h i s . emit 来遍历 getData 事件，首先用按钮来触发 setData 事件，在 setData 中 用 this. emit来遍历getData事件，首先用按钮来触发setData事件，在setData中用this.emit 来遍历 getData 事件，最后返回 this.msg
- 父传子 props 中的 自定义属性
- 子传父 通过this.$emit(“event name”, value);//通过事件触发 自定义事件
总结：
- 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
- 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
- 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
九.VUE自定义方法
自定义文件如下:
//对cookie 操作方法的封装
//增,改(天)
function setCookie(name, value, time) {
//是否设置了过期时间,如果设置过期时间就用过期时间,否者默认时效
if (time) {
var date = new Date();
date.setDate(date.getDate() + time);
} else {
document.cookie = name + "=" + value + ";expires=" + date;
}
}
// 查
function getCookie(name) {
var cookie = document.cookie;
var cookies = cookie.split("; ");
for (var i = 0; i < cookies.length; i++) {
if (cookies[i].indexOf(name) == 0) {
return cookies[i].substr(name.length + 1);
}
}
return null;
}
//删除:将cookie的过期时间设置成过去事件
function removeCookie(name) {
setCookie(name, "", -1);
}
export { setCookie, getCookie, removeCookie };
-
在需要使用自定义方法的vue中引入方式如下: (按需引入)
import {setCookie} from '@....' -
全局注册(在main.js中如一下方式引入)
import cookie {setCookie} from '@....' vue.use(cookie)
十.VUE网络请求
1.axios的使用
-
下载安装axios 以及qs插件 axios官网
🍐
npm i axios -S🍑
npm i qs -S( 用于post请求格式化参数 )Vue.prototype.$axios=axios;//给vue添加axios方法 Vue.prototype.$qs=qs;//给vue添加qs方法 -
axios 的使用
//get 请求 this.$axios .get("http://localhost/XAH201106/project/server/info.php", { params: { gid: "1619571805045bXFPV" } }) .then(res => { console.log(res); }); //post 请求VUEX (1)通过qs对参数进行格式化 let params = this.$qs.stringify({ //参数需要通过qs插件转换格式 uname: 222, pword: 111 }); this.$axios .post("http://localhost/XAH201106/project/server/login.php", params) .then(res => { console.log(res); }); (2)利用js自带的FromData对象对数据进行包装 let fd = new FormData(); fd.append("uname", "222"), fd.append("pword", "111"); axios.post("http://localhost/XAH201106/project/server/login.php", fd.then(res=>{ console.log(res); });
2.jQuery发送请求
-
下载安装 jQuery
🍐
npm i query -S -
配置jQuery
在 build\webpack.base.conf.js 中添加一下配置
-
引入webpack jQuery配置
const webpack = require("webpack"); -
在module.exports 添加一下配置
plugins: [*//jQuery配置* new webpack.ProvidePlugin({ $: "jquery", jquery: "jquery" }) ],
-
在vue中使用
$.ajax({ type: "get", url: "http://localhost/XAH201106/project/server/info.php", data: { gid: "1619571805045bXFPV" }, success: res => { this.type = "get"; this.url = "http://localhost/XAH201106/project/server/info.php"; this.opts = "gid:1619571805045bXFPV"; this.res = res; } });
3.Vue-resource
-
vue-resource安装与应用vue-resource安装与应用
安装vue-resource到项目中，找到当前项目🍎 输入：
npm install vue-resource --save安装完毕后，在main.js中导入，如下所示：
🍎
import VueResource from 'vue-resource'🍎
Vue.use(VueResource) -
在vue中使用
get请求 var params = {params: {id: id}} this.$http.get(url, params).then(function(res){ // 响应成功回调 var data = res.body; //数据在res.body里面 }, function(res){ // 响应错误回调 }); post请求 启用{emulateJSON : true}选项后，请求会以application/x-www-form-urlencoded作为content-type,像HTML表单一样。 var params = {params: {id: id}} this.$http.post(url, params,{emulateJSON : true}).then(function(res){ // 响应成功回调 var data = res.body; //数据在res.body里面 }, function(res){ // 响应错误回调 }); JSONP 请求 var JSONparams ={ params: {id: id} jsonp: 'callback' // 设置回调函数的参数的一个名字，默认是话是callback, } this.$http.jsonp(url, JSONparams).then( (res) => { console.log(res); }, (err) => { console.log(err); })
十一.VUEX
1. 安装 配置vuex
🍎 npm i vuex -S
在src路径下新建文件夹 store 新建文件index.js
❓ (注意)辅助函数在局部引入vuex时无法使用只有在全局使用时才可以使用
//对vuex进行配置
//vuex是vue提供的 全局状态管理 ,本质通过js对象来存放项目中全局共享的数据 vuex中将要管理的共享数据成为状态或者(状态值)
//vuex更适用于大型项目只能怪进行状态管理,小型项目或在全局状态较少时,使用vuex反而显得繁琐
//vuex 管理的状态在页面刷新后,因为模块要重载,所以会导致数据丢失
//如果不希望数据随刷新丢失,可以将数据备份在locationStorage中,每次刷新,读取备份更新状态
//引入vue
import Vue from "vue";
import Vuex from "vuex";
//全局声明
Vue.use(Vuex);
//导出vuex实例
export default new Vuex.Store({
//state vuex所管理的状态列表,状态的声明,初始化
state: {
count: 0
},
//类似于组件中的menthods,vuex规定对state中状态的修改不要直接赋值,需要通过 commit()提交mutations中方法的方式进行,
//注意 mutations 中只能执行同步修改操作
mutations: {
//mutations中方法都存在state参数 可以直接访问state中的转态
//可选参数 options 称为 载荷 用于接收组件中commit()提及啊哟方法时携带的数据
addCount(state, options) {
state.count += options;
},
subCount(state) {
state.count--;
}
},
//类似于组件中computed,state 的计算属性
getters: {
//计算count立方根的整数结果
cbrtCount(state) {
return Number.parseInt(Math.cbrt(state.count));
},
mean(state) {
return (state.count ** 2 + state.count ** 3) / 2;
},
exchange(state) {
// let count=state.count.toString();
// if(count.length==2){
// count=count.split('').reverse().join('');
// return count*1
// }
if (state.count < 100 && state.count > 9) {
return Number.parseInt(state.count / 10) + (state.count % 10) * 10;
}
return state.count;
}
},//actions: 异步的mutations,如果需要异步操作修改state,那么需要将异步过程写在actions中,带异步操作借宿,在actions里面commit提交mutationos
actions:{
//actions 中的异步方法 都存在参数context,包含store实例的方法和属性
//actions 和mutataions一样支持载荷
addCountAsync(context,options){
setTimeout(()=>{
let n= Math.round(Math.random())
console.log(n);
if(n){
context.commit('addCount',options);
}
},3000)
}
}
});
在min.js中进行一下配置
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//导入配置好的vuex模块
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
2.在vue中使用
//vuex 提供了辅助函数 mapState mapGetters mapMutations 可以在组件中快速写入状态或方法
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
//当组件中计算属性名 与状态名相同时可以直接填写数组
computed:mapState([
'count'
]),
//配合拓展运算符使用
computed:{
...mapState(['count']),
...mapGetters(['cbrtCount']),
},
methods:{
add(){
//提交mutations的addCount()方法对state中count状态进行修改
this.$store.commit('addCount',1);
},
sub(){
this.$store.commit('subCount')
}
},
methods:{
...mapMutations({
add:'addCount',
sub:'subCount'
}),
}
十二.Vue-UI框架
1.Swiper
- 🍎 下载:
npm i swiper -Sswiper中国站点 - 安装: swiper:在需要使用swiper组件的vue文件中添加
import Swiper from 'swiper/swiper-bundle.min.js'在main.js中引入swiper的css文件,全局引入swiper css文件import 'swiper/swiper-bundle.min.css - 当数据是网络请求时,因为是数据请求是异步的行为;所以初始化swiper应该写在updataed声明周期中
2.Element-ui
-
🍎 下载:
npm i element-ui -SElement-Ui 官网 -
安装 element-ui 在 main.js 中写入以下内容:
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css';
3.Echarts
-
🍎 下载:
npm i element-ui -SEcharts 官网 -
在组件中使用
import * as echarts from 'echarts'; export default{ name:'C', mounted(){ 初始化echarts let myEcharts=echarts.init(document.querySelector('.bar')); //对echarts进行参数配置 myEcharts.setOption({ title:{text:'XAH201106班级男女比例图'}, tooltip:{},设置提示信息 //对x轴的配置 // xAxis:{ // type:'category',//当前轴为分类轴 // data:['男生','女生']//分类至 // }, //对y轴的配置 // yAxis:{ // type:'value'//表示当前轴是数据轴(数值轴) // }, series:[{ type:'pie',//数据表类型 data:[ {value:4,name:'优秀'}, {value:3,name:'及格'}, {value:6,name:'良好'}, {value:4,name:'不及格'} ] }] }) } }
十三.Vue打包
-
🍎 执行命令
npm run build -
打包完后会在项目目录下生成dist目录, 将dist部署在服务器上即可
常见问题
-
页面空白.css js文件引入路径404
原因:默认打包配置以绝对路径引入文件,需要将打包配置中的路径改为相对路径
解决:config文件下 ->index.js ->bulid配置 ->assetsPublicPath -> ‘./’ : 重新打包
// Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './',(此处修改) -
背景图路径404 图片加载失败
原因:打包后css中的背景图都变成了外联css文件 路径位置发生了变化
(1) style代码中使用的背景图片都应当存放于assets目录 并以相对路径引入
(2) template 代码中,静态图片路径都应存放于assets目录,兵役相对路径引入
(3)template 代码中动态图片都应存放于static目录,并以绝对路径引入,注意绝对路径应该写成**'static/ ’ 而非 ‘/static/’**
(4)build 文件夹下 ->utils.js ->vue.style-loader 后面添加 ->publicPath:’…/…/’
if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:'../../' (此处添加) }) -
字体文件异常
在 bulid目录下 ->build\webpack.base.conf.js 找到
{ test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000,修改其大小 name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } }
-
十四.Vue安装less
npm install less@3.12.2 less-loader@4.1.0 --save-dev
在build\webpack.base.conf.js中配置 module:->rules:{ {
test: /.less$/,
loader: “style-loader!css-loader!less-loader”
} }
扫一扫
275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
