第一模块
npm install -g vue-cli
1.创建项目
vue init webpack buying(项目文件夹名)
2.安装依赖
cd buying
npm i
3.安装第三方插件
状态管理：npm install vuex --save
移动框架：npm i vant -S
语言包：npm install vue-i18n --save-dev
3.1请求：npm install axios --save
css编译器stylus：npm install stylus stylus-loader style-loader --save-dev
css编译器less：npm install less less-loader --save-dev
在【build】文件下的【webpack.base.conf.js】文件中【rules】中加入
{
test: /.less$/,
loader: "style-loader!css-loader!less-loader",
},
报错：Module build failed: TypeError: loaderContext.getResolve is not a function
**解决方法：**卸载安装的高版本的less-loader，
npm uninstall less-loader
安装指定低版本的less-loader
npm install less-loader@4.1.0 --save
3.2为了解决post默认使用的是x-www-from-urlencoded 去请求数据，导致请求参数无法传递到后台，所以还需要安装一个插件QS
npm i qs
3.3移动端适配插件lib-flexible
npm i lib-flexible --save-dev
用法：在main.js中引入lib-flexible
import 'lib-flexible/flexible'
3.4安装px2rem loader
npm install px2rem-loader --save-dev
用法：配置px2rem-loader
在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，
如：
const cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
同时，在generateLoaders方法中添加px2remLoader
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
3.5滑动
npm install swiper --save-dev
用法
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
3.6上啦刷新下拉加载
npm install better-scroll --save-dev
用法
import Scroll from '@/components/scroll/scroll'
export default {
components: {
Scroll
},
}
启动
npm run dev
打包
npm run build
空格报错解决
在webpack.base.conf.js注释掉下面那一行
module: {
rules: [
// ...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
}
