1.创建项目 -脚手架快速构建
//注：cli前全局安装 webpack与vue
npm install webpack -g webpack -v;
vue-cli vue -V
//执行
vue init webpack vue_demo
2.配置sass ,以及全局引入sass变量
npm install --save-dev sass-loader
npm install --save-dev node-sass
npm install --save-dev sass-resources-loader
//在 build 文件夹下找到 util.js 修改sass编译器loader的配置
function resolveResource(name) {
return path.resolve(__dirname, '../src/style/' + name);
}
function generateSassResourceLoader() {
var loaders = [
cssLoader,
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [resolveResource('common.scss')]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
//修改sass配置的调用为 generateSassResourceLoader()
sass: generateSassResourceLoader(),
scss: generateSassResourceLoader(),
//在 main.js 中全局引用 common.scss 文件，重启服务
import './style/common.scss'
//局部页面引用：
3.配置axios
npm install --save axios
npm install --save qs
//main.js引用
import axios from 'axios'
Vue.prototype.$axios= axios
axios.defaults.baseURL = 'http://47.94.216.215'
//请求头拦截配置
axios.interceptors.request.use((config) => {
if(localStorage.token != undefined){
config.headers['token'] = localStorage.token;
}
return config;
}, (error) => {
return Promise.reject(error);
});
//响应状态拦截
axios.interceptors.response.use((response) => {
console.log("请求成功" + response.data.code)
return response;
}, (error) => {
console.log("出现跨域问题，不返回状态")
console.log(error);
return Promise.reject(error);
});
import qs from 'qs'
Vue.prototype.$qs = qs
this.$axios.post(url,
this.$qs.stringify({
mobile: '15210919778',
password: '111111',
})
).then(function (response) {
});
4.配置ydui ui框架
npm install vue-ydui --save
//如果需要使用rem单位,则需在html页面引入ydui.flexible.js，按需引入单个组件，另需导入重置基础样式（其未包含任何组件样式），即在入口文件 main.js 中如下配置：
//main.js
import 'vue-ydui/dist/ydui.rem.css';
import 'vue-ydui/dist/ydui.base.css';
//index.html
//全局引入
import { Confirm, Alert, Toast, Notify, Loading } from 'vue-ydui/dist/lib.rem/dialog';
Vue.prototype.$dialog = {
confirm: Confirm,
alert: Alert,
toast: Toast,
notify: Notify,
loading: Loading,
};
//按需引入
import {Button, ButtonGroup} from 'vue-ydui/dist/lib.rem/button';
import {InfiniteScroll} from 'vue-ydui/dist/lib.rem/infinitescroll';
import {ListTheme, ListItem, ListOther} from 'vue-ydui/dist/lib.rem/list';
Vue.component(ListTheme.name, ListTheme);
Vue.component(ListItem.name, ListItem);
Vue.component(ListOther.name, ListOther);
Vue.component(Button.name, Button);
Vue.component(ButtonGroup.name, ButtonGroup);
Vue.component(InfiniteScroll.name, InfiniteScroll);
5.配置ui框架 vux
npm install --save vux
npm install vux-loader --save-dev
const vuxLoader = require('vux-loader')
6. npm 发布 自己的包（详情）
vue init webpack-simple packname;
//src创建一个文件夹lib ,放各个.vue组件；
//.vue编写各个组件
export default {
name:'chanyeyunFooter',
}
//src创建一个文件index.js 作为入口文件；
//index.js
import chanyeyunHeader from './lib/chanyeyun-header.vue'
import chanyeyunFooter from './lib/chanyeyun-footer.vue'
const chanyeyun = {
install(Vue,options){
Vue.component(chanyeyunHeader.name,chanyeyunHeader);
Vue.component(chanyeyunFooter.name,chanyeyunFooter);
}
}
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(chanyeyun)
}
export default chanyeyun
//模拟引入 查看效果
import chanyeyunUi from './index.js'
Vue.use(chanyeyunUi)
//webpack模拟
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
//npm run build 前修改 webpack.config.js，入口文件修改为index.js
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'vue-chanyeyun.js', //打包生成文件的名字
library:'Chanyeyun', //reqire引入的名字
libraryTarget:'umd',
umdNamedDefine:true
},
//上传包之前修改package.json 文件
"name": "chanyeyun-ui", //包名
"main": "dist/vue-chanyeyun.js", //dist打包后地址
"private": false,
"repository": {
"type": "git",
"url": "http://116.196.109.204/nana/chanyeyun-ui.git" //git仓库地址
},
// npm账号登录cmd
npm login
baina *nana*523862! [email protected]
// npm发布
npm publish .
//使用安装 npm install chanyeyun-ui --save （包名）
//main.js引用
import chanyeyunUi from 'chanyeyun-ui'
Vue.use(chanyeyunUi)
//页面使用
7.fastclick ，处理移动端click事件300毫秒延迟
npm install fastclick -S
//main.js引用
import FastClick from 'fastclick'
FastClick.attach(document.body);
8.vue-lazyload 图片懒加载处理
npm install vue-lazyload --save-dev
//main.js引用
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload,{
error:'./static/error.png',
loading:'./static/loading.jpg'
})
//使用
![]()
9.vue-clipboards 复制功能
npm install vue-clipboards --save
//main.js引用
import VueClipboards from 'vue-clipboards';
Vue.use(VueClipboards);
//使用copyData复制的data数据，handleSuccess复制成功函数，handleError复制失败函数
10 vue压缩上传图片lrz
npm install --save lrz
-
![]()
![]()
11获取当前位置信息,腾讯地图
mounted(){
this.Tmap()
},
Tmap() {
window.addEventListener('message', function(event) {
var loc = event.data;
this.lat = loc.lat;
this.lng = loc.lng;
console.log(this.lat);
console.log(this.lng);
}, false);
12.父组件给子组件传值
//父组件
import Icon from '../components/XXX.vue'
components:{
Icon,
},
13.子组件给父组件传值
//子组件向上抛出一个事件
this.$emit('success', 值)；
//父组件
14.父组件调用子组件方法
父组件：
setTimeout(function(){
this.$refs.customer.typeChange(); //子组件方法
},1000)
15.vue dom属性变量拼接
:session-from="'sobot|['+userInfo.nickName+']|['+userInfo.avatarUrl+']|['+params+']|transferAction=['+transferAction+']'"