1、安装webpack
npm install webpack -g
2、安装Cli
npm install -g @vue/cli
2、创建项目
cd到项目文件夹下
vue init webpack 项目名
项目名小写不要驼峰不要大写，可用 - 间隔单词
创建成功后运行下看看
cd 项目名
npm run dev
成功后，网页打开http://localhost:8080，看到欢迎页。
3、webstorm打开工程，开始配置。
设置运行命令快捷按钮，顶部工具栏Add Configuration... > + > npm > Scriptes里填dev > OK
点绿色运行按钮，运行成功。
4、配置ESlint警告和报错
5、Vuex（状态管理）
安装
npm install vuex --save
在main.js里引入
import Vuex from 'vuex'
Vue.use(Vuex)
6、Axios（数据请求模块）
安装
npm install axios js-cookie --save
添加api（请求模块）、apiconfig（公共请求封装）文件夹
在apiconfig里创建index.js文件，内容如下，里面按需配置（如请求成功、数据格式等）
/* eslint-disable */
import axios from 'axios'
/**
* 定义请求常量
*/
export const baseUrl = "http://192.168.1.220:8001/api/update.ashx";
// 请求超时时间
axios.defaults.timeout = 2000;
// 请求拦截
axios.interceptors.request.use(
config => {
// 在发送请求之前做些什么
return config
},
error => {
// 对请求错误做些什么
return Promise.reject(error)
}
)
// 响应拦截
axios.interceptors.response.use(
response => {
// 对响应数据做点什么
let {data} = response;
if(response.config.url == baseUrl){
return Promise.resolve(data.result);
}else if(!data.Result){
// 服务器错误处理
return Promise.reject(data.Message);
}else{
return Promise.resolve(data.Data);
}
},
error => {
// 对响应错误做点什么
return Promise.reject(error)
}
)
// 封装post请求
export function fetch(requestUrl, params = '') {
return axios({
url: requestUrl,
method: 'post',
data: {
'body': params
}
})
}
为了在使用的文件中简写apiconfig和api文件地址，在build/webpack.base.conf.js的resolve.alias添加代码
'config': resolve('src/apiconfig'),//添加的代码
'api': resolve('src/api'),//添加的代码
跨域问题在config/index.js中配置
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/root/':{target: 'http://xxx'} //添加的代码
},
7、Less
安装
npm install less less-loader --save-dev
配置
在build/webpack.base.conf.js 的module.exports.module.rules 里面添加
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader',
}
8、移动端适配
（1）flexible
安装
npm i lib-flexible --save
在main.js里引入
import 'lib-flexible/flexible'
（2）px2rem-loader
安装
npm install px2rem-loader
配置，在build/util.js里修改
// 添加的代码
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75 // 这里设置html根字体，vant-UI的官方根字体大小是37.5
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader, px2remLoader]// 添加的代码
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
9、UI框架，Vant
安装
npm i vant -S
在main.js里添加
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant)
10、页面切换
11、其他优化
（1）fastclick，解决点击事件300ms延迟
安装
npm install fastclick --save
在main.js中引入
import FastClick from 'fastclick'
FastClick.attach(document.body)
网友评论