vue学习第三天 ------ 临时笔记
说明:之前两天属于入门,文章可能存在片段信息
vue2.x+webpack快速搭建前端项目框架详解
http://www.jb51.net/article/129463.htm
Vue cli + Webpack-simple 怎么修改生产环境下运行的端口?
https://segmentfault.com/q/1010000012994924
webpack和webpack-simple区别(如何引入css文件)
https://www.cnblogs.com/xuange306/p/7114945.html
Vue2.0小白入门教程
https://ke.qq.com/course/256052#term_id=100301895 https://www.cnblogs.com/grimm/p/5767945.html
1.镜像
在使用npm之前,最好把镜像换成淘宝的,长久使用,跑一下命令:
npm config set registry https://registry.npm.taobao.org
替换成功后跑命令:
npm config get registry
显示淘宝镜像路径的话就代表替换成功
2.
安装依赖npm install
三、添加相应的框架以及依赖
1.引入sass预编译工具加快编码速度,跑命令npm install node-sass --save-dev, npm install sass-loader --save-dev,如果node-sass比较难装的话可以换成cnpm来下载依赖,具体可百度下做法。
操作:
在components目录下新建一个header的目录,新建两个文件header.vue header.scss,然后引入到app.vue中使用,因为vue讲的是模块化开发,所以我喜欢把样式跟组件放到一个文件夹里跟其他模块区分,
App.vue:
header.scss:
这样就证明sass 是安装成功了。
2.引入axios接口请求框架,跑命令npm install axios --save-dev,npm install qs;
然后在src目录下新建一个http.js文件进行接口请求的相关配置,
import Vue from 'vue'
import axios from 'axios'
import Qs from 'qs'; var instance = axios.create({
//baseURL: 'https://some-domain.com/api/',
timeout: timeout,
responseType: 'json', // default,
//headers: {'apikey': 'foobar'},
transformRequest:function(data,headers){
//为了避免qs格式化时对内层对象的格式化先把内层的对象转为
//由于使用的form-data传数据所以要格式化
if (typeof data == 'string') { headers.post['Content-Type'] = "application/json; charset=utf-8"; }
else if(!(data instanceof FormData)){
headers.post['Content-Type'] = "application/x-www-form-urlencoded"; for(let key in data){
if(data[key]===undefined){
data[key]=null;
}
}
data = Qs.stringify(data);
} return data;
}
});
export default instance; Vue.prototype.$http=instance;
在使用请求接口的时候直接可以这样用:(具体用法可以看下官方文档)
this.$http.get(url).then((res)=>{
})
3.引入elementUI,跟人感觉elementUI是比较好用的vue组件UI,很多东西不用自己去写,推荐使用,跑指令npm install element-ui --save,
然后在main.js中引入使用
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue' Vue.use(ElementUI)
当然也可以按需引入,想用什么组件就引入什么组件,不要全部引入,这样减少体积。
4.引入vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
安装:npm install vuex --save
vue学习第三天 ------ 临时笔记的更多相关文章
- vue学习第四天 ------ 临时笔记
1.驼峰写法 在html标签中,由于html的特性是不区分大小写(比如LI和li是一样的),因此,html标签中要传递的值要写成短横线式的(如btn-test),以区分大小写. 在props的数组中, ...
- vue学习【三】vue-router路由显示多页面
大家好,我是一叶,今天是七夕,单身狗的我还在这里写踩坑文.在这里还是要祝大家早日脱单(能不能脱单自己心里没个数吗).本篇继续踩坑,在单页面上展示多页的内容,大家的想法是什么,估计大家第一印象会是ifr ...
- Vue学习系列(三)——基本指令
前言 在上一篇中,我们已经对组件有了更加进一步的认识,从组件的创建构造器到组件的组成,进而到组件的使用,.从组件的基本使用.组件属性,以及自定义事件实现父子通讯和巧妙运用插槽slot分发内容,进一步的 ...
- VUE学习(三)语法
模板语法 Mustache 语法 1.插值 <span v-once>这个将不会改变: {{ msg }}</span> v-once,一次性,否则就会绑定 {{ }} ...
- Vue学习(三):数据绑定语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue学习(三)完善模板页(bootstrap+AdminLTE)
1.配置index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- vue学习(三)组件传值
组件 官网(https://cn.vuejs.org/v2/guide/components.html) 组件分为局部组件和全局组件 局部组件:是内容中国的一部分 只是在当前组件加载的时候 全部组件: ...
- vue学习-第三个DEMO(计算属性和监视) v-model基础用法
<div id="demo"> 姓:<input type="text" placeholder="First Name" ...
- vue学习(二) 三个指令v-cloak v-text v-html
//style <style> [v-cloak]{ display:none } </style> //html <div id="app"> ...
随机推荐
- poj2409(polya 定理模板)
题目链接:http://poj.org/problem?id=2409 题意:输入 m, n 表示有 m 种颜色,要构造一个长度为 n 的手环,旋转和对称的只算一种,问能组成多少个不同的手环. 思路: ...
- 10.11cdy考试题
鸣谢cdy math [题目描述] 众所周知, xkj是GH的得意门生, 可是xkj的数学成绩并不是很理想: 每次GH在批评完数学限训做的差的人时, 总会在后面加一句:咱们班还有一位做的最差的同学-- ...
- 选课 ( dp 树形dp 动态规划 树规)
和某篇随笔重了?!!?!?!?!?!?不管了留着吧 题目: 在大学里每个学生,为了达到一定的学分,必须从很多课程里选择一些课程来学习,在课程里有些课程必须在某些课程之前学习,如高等数学总是在其它课程之 ...
- CF959D Mahmoud and Ehab and another array construction task 数学
Mahmoud has an array a consisting of n integers. He asked Ehab to find another array b of the same l ...
- 21.Longest Palindromic Substring(最长回文子串)
Level: Medium 题目描述: Given a string s, find the longest palindromic substring in s. You may assume ...
- kuangbin专题十二 POJ1661 Help Jimmy (dp)
Help Jimmy Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 14214 Accepted: 4729 Descr ...
- zookeeper分布式锁简单实现(JavaApi)
1.创建会话连接 package com.karat.cn.zookeeperAchieveLock.javaapilock; import org.apache.zookeeper.WatchedE ...
- 架构师 AI 技术
架构师是大忽悠吗?阿里技术大牛告诉你真相! - huangshulang1234的博客 - CSDN博客https://blog.csdn.net/huangshulang1234/article/d ...
- sublime 配置主题
默认主题可能看不清楚: 安装 PackageResourceViewer 安装Soda 主题 setting中加入 "theme": "Soda Light 3.subl ...
- 根据map中某一字段排序
以上是从小到大的排序...要注意.! 需要jdk8...