最近一直在学习前端的东西，然后项目开发用的vue，在做项目的过程中，大概知道了一些基本的常用的第三方，然后，抽时间整理一下，方便之后的复习。
1.用Terminal 终端来生成vue项目，在这之前要配置好vue的环境，不会的自行百度
1）生成项目
vue init webpack testticy2）进入项目和安装依赖
cd testity
npm install3）启动项目
npm run dev注意：如果 npm install 失败，用mac开发的要 开放文件的权限，并使用 sudo npm install 来安装脚手架 sudo 是输入管理员密码的意思
注意：补充一下，针对vue版本在3.0以上的，创建项目就更加简单了
第一步：vue create 项目名
第二步：选择模式 自动还是手动
根据需要自行选
二：
1. vue-router 路由的安装
npm install --save vue-router引入：
1.)在src 先新建文件夹router 在里面新建文件 index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})2)在main.js里面引入
import router from './router'
new Vue里添加 router2. axios 网络请求
安装
npm install axios —save引入：
1）在main.js里面引入
//导入 axios 来处理网络请求（这不是vue本身的模块，这是官方推荐使用的第三方模块）
import axios from 'axios'
//使用--示例
//Vue.prototype.userName='小黑'
Vue.prototype.axios=axios;3. vuex 各个组件要操作同一数据的时候适合使用vuex
安装
sudo npm install vuex --save引入：
1）Src下新建一个文件夹，例如 store 在里面新建 store.js
import Vue from 'vue'
import Vuex from 'vuex'
// 全局注册
Vue.use(Vuex)
//提出来 --然后要导进来
let state={//存放一些数据
}
let mutations={
}
let actions={
}
let getters={
}
//单例 state 存数据的 mutations：同步处理 actions：异步处理 Getters 可以认为是store的计算属性
const store=new Vuex.Store({
state,
mutations,
actions,
getters
})
// 导出
export default store2）在main.js下 引入
import store from './store/store'//路劲/名字
new vue 里添加 store4. mint-ui使用
安装：
npm install mint-ui —save引入：
import Mint from 'mint-ui'
import "mint-ui/lib/style.css"
Vue.use(Mint)5. SCSS使用
安装：
npm install sass-loader --save-dev
npm install node-sass --sava-dev使用：
1）在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}2）使用scss时候在所在的style样式标签上添加lang=”scss”即可应用对应的语法，否则报错
6.屏幕自适应
安装
1、npm i amfe-flexible
2、import 'amfe-flexible'
3、npm i postcss-px2rem引入
在package.json里添加
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px2rem": {
"remUnit": 37.5
}
}
}7. json-server 的使用
安装--保存在dev路劲下
sudo npm install json-server --save -dev引入：
1）
第一步
首先在 webpack.dev.conf.js 文件中的 const portfinder = require('portfinder') 大约12行的位置
添加如下代码：
//第一步
// 引入json-server（这个模块的作用是可以在前端自己创建一些结构（基于node.js））
const josnServer=require('json-server')
const apiServer=josnServer.create()
// 这个db.josn就是制作接口的json文件，默认放在项目根目录下
const apiRouter=josnServer.router('db.json')
const middlewares=josnServer.defaults()
apiServer.use(middlewares)
apiServer.use(apiRouter)
//因为我们还有一个webpack服务，端口号是我们自己配置的4000，这里也要配置一个端口号，是不能重复的
// http://localhost:4003/getProductList
apiServer.listen(4003,()=>{
console.log('JSON Server is Running')
})8. Vue 懒加载 vue-lazyload 资料：https://github.com/hilongjw/vue-lazyload
安装
npm install vue-lazyload --save引入
// 默认的图片
import logoSrc from './assets/logo.png'
// 导入懒加载模块
import VueLazyload from 'vue-lazyload'
//全局注册
Vue.use(VueLazyload,{
error:logoSrc,//这个是请求失败后显示的图片
loading:logoSrc,//这个是加载的loading的效果
tyr:2 //这个是加载图片效果
})9. vue-devtools 资料 https://github.com/vuejs/vue-devtools
安装：
1.下载到桌面
cd /Users/wuxiaolei/desktop
git clone https://github.com/vuejs/vue-devtools.git2.进入目录 vue-devtools目录
3.执行 npm install
4执行 npm run build
5.加载到chrome扩张页面
6.选中“开发人员模式”
7.单击“加载解包扩展”，然后选择Shell/Chrome。
资料系列：
1. 轮播图 Vue-swiper 或者 vue-awesome-swiper 资料 https://github.com/surmon-china/vue-awesome-swiper
2.移动端 mint ui https://github.com/ElemeFE/mint-ui
3.PC端 element http://element-cn.eleme.io/#/zh-CN/component/layout
封装系列
1.axios的封装
1）首先先导入 axios 框架 导入之后在src文件夹下新建 文件夹 utils （随意） 在下面新加 http.js 文件
// axios 拦截器
import {getToken} from '@/utils/auth';
import axios from 'axios'
import store from '../../src/store'
import router from '../../src/router'
// axios 配置
axios.defaults.timeout = 5000
axios.defaults.baseURL = 'https://tushuguan.qs110.com/wxadmin/'
// http request 拦截器
axios.interceptors.request.use(
config => {
if (store.state.token) {
config.headers.Authorization = getToken();
}
return config
},
err => {
return Promise.reject(err)
},
)
// http response 拦截器
axios.interceptors.response.use(
response => {
console.log("--zhang1234--"+response.data.success)
if (response.data.success!=undefined&& response.data.success == '10') {
alert('', '登录超时', {
confirmButtonText: '确定',
callback: function (action) {
//跳转登录界面
// router.push({path:'/login'})
// 只有在当前路由不是登录页面才跳转
router.currentRoute.path !== 'login' &&
router.replace({
path: 'login',
query: { redirect: router.currentRoute.path },
})
}
});
return;
}
return response
},
error => {
//if (error.response) {
//switch (error.response.status) {
// case 401:
// // 401 清除token信息并跳转到登录页面
// //store.commit(types.LOGOUT)
// // 只有在当前路由不是登录页面才跳转
// router.currentRoute.path !== 'login' &&
// router.replace({
// path: 'login',
// query: { redirect: router.currentRoute.path },
// })
// }
//}
// console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
//return Promise.reject(error.response.data)
},
)
export default axios2)在main.js中引入
import axios from './utils/http'
Vue.prototype.$axios=axios;3）封装axios的网络请求方法 在新建的 utils文件下新建 axiosutils 文件 封装axios的post 和get请求方法
import {getToken} from '@/utils/auth';
// _self上下文环境变量
//_url请求地址
//jsData 参数
//showError 是否显示错误信息
// 回调
//var baseurl="https://tushuguan.qs110.com/wxadmin/";
export function axiosutils(_self, _url, jsData, showError, callback){
//url:baseurl+ _url,
_self.$axios({
method: 'post',
url: _url,
data:_self.$qs.stringify(jsData),
headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
token:getToken()
}
}
).then(
res => {
if (callback == null){
return;
}
callback(res);
},
err => {
console.log("7777="+err);
if (showError) {
_self.$alert('', '数据获取失败', {
confirmButtonText: '确定',
callback: function (action) {
}
});
}
}
);
}
//get请求
export function axiosutilsget(_self, _url, jsData, showError, callback){
_self.$axios({
method: 'get',
url: baseurl+_url,
params:_self.$qs.stringify(jsData),
headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
token:getToken()
}
}
).then(
res => {
if (callback == null){
return;
}
callback(res);
},
err => {
console.log("zhang="+err)
}
);
}
4)在main.js中引入
//axios的post请求
import {axiosutils} from './utils/axiosutils'
Vue.prototype.$axiosutile=axiosutils;
//axios的get请求
import {axiosutilsget} from './utils/axiosutils'
Vue.prototype.$axiosutilsget=axiosutilsget;2. token 的保存 使用 js-cookie
1）.在utils文件夹下新建 文件 auth.js 随意
import Cookies from 'js-cookie'
const TokenKey = 'Admin-Token'
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {//保存token
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}2）登录界面
//引入
import {
getToken,
setToken,
removeToken
} from '@/utils/auth'
//保存
setToken(data.token)路由跳转系列
1）路由传参
{
path:'/homedetails/:id',
name:'HomeDetails',
component:HomeDetails
}传递参数：this.$router.push("/homedetails/" + cid);
接收参数：var tab = this.$route.params.id;
2)多参数传参
clickFn(hospital_id){
this.$router.push({path:"/learndetails",query:{s1:hospital_id,s2:this.choseType}})
}接收参数：
created(){
//打印一下获取的参数
let query=this.$route.query;
console.log(query);
}模块之间的传值系列
1、https://www.jianshu.com/p/af9cb05bfbaf
https://cn.vuejs.org/v2/guide/components-props.html
父组件通过 props 向下传递数据给子组件；子组件通过 events 给父组件发送消息
对数组操作的常用方法
1）slice
var classlistgroup = list.slice(开始位置,结束位置);
2）split 对 var s=‘1,2,3,4,5,6’
var s1 = data.msg.split(","); //转换后变成一个数组
3）concat 给一个数组再拼接一个数组
Var s=list.concat(list1);
4）JSON.stringify（） 将对象转成字符串
JSON.parse(）将字符串转成对象
5）timer3
Var timer3= setTimeout: setTimeout(function () {
//写逻辑方法
}, time * 1000)
//清空
clearTimeout(timer3);