使用vue-cli搭建脚手架webpack打包顶级商城APP

安装vue-cli脚手架

npm i vue-cli -S

 使用vue查看是否安装成功

 使用vue init webpack 初始化构建项目

最后一步，我选择的是no ，用的是淘宝镜像进行安装依赖包，默认选中yes

安装完成后，项目目录如下：

到这里，基本的项目就搭建起来了。 运行 npm run dev 指令就可以访问页面了

运行成功，直接访问地址：

 

使用mockjs模拟数据请求

安装mockjs

npm i mockjs --save

在src目录下，创建mock.js文件（模拟服务端数据请求）

[code]                      <h1>省略</h1>

main.js中只需要导入这个mock.js文件即可

[code]import './mock'

使用vue-resource发送请求

安装vue-resouce

npm i vue-resource --save

 

在main.js中，引入并配置

[code]import VueResource from 'vue-resource'
Vue.use(VueResource)

使用less外部文件，导入移动终端适配方案rem布局

比如：在App.vue中<style lang="less" scope >内 @import './less/index.less';

注意：vue-cli中没有提供less-loader需要自己手动安装

npm i less less-loader --save-dev

注意：后缀不能少，分号不能少

less文件：(作废)

使用rem为单位/@baseFontSize

 

vue-cli2全局配置less文件

需要安装sass-resources-loader

npm i sass-resources-loader -D

在build/utils文件中exports.cssLoaders = function (options) {

}导出函数内部，generateLoaders()函数上新增一个方法lessResourceLoader

[code]  // 全局配置less文件函数
function lessResourceLoader() {
var loaders = [
cssLoader,
'less-loader',   // 如果是sass，这里写sass-loader就行
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/less/index.less'), //这里是需要全局导入的less文件
]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}

最后在exports.cssLoaders 导出函数内部return中更改 less: lessResourceLoader('less'),

[code]  return {
css: generateLoaders(),
postcss: generateLoaders(),
less: lessResourceLoader('less'),   //这里是改用了自己上方定义的less函数
sass: generateLoaders('sass', {
indentedSyntax: true
}),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}

 注意：导入的less文件不能在less文件内部在导入其他的less文件

less文件如下：

[code]
@adapterDeviceList: 750px, 720px, 640px, 540px, 480px, 424px, 414px, 400px, 384px, 375px, 360px, 320px;
@deviceLen: length(@adapterDeviceList);
@baseFontSize: 100px;
@psdWidth: 750px;
@klcolor: #4dfa09 !important;

.adapterDevice(@index) when (@index > 0) {
@media (min-width: extract(@adapterDeviceList, @index)) {
html {
font-size: @baseFontSize / @psdWidth * extract(@adapterDeviceList, @index);
}
}

.adapterDevice(@index - 1);
}

.adapterDevice(@deviceLen);

*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
}

body {
font-family: "Microsoft YaHei", sans-serif;
color: #333;
}

ul,
ol {
list-style: none;
}

a {
text-decoration: none;
color: #333;
}

input,
textarea {
border: none;
outline: none;
resize: none;
-webkit-appearance: none;
}

.f_left {
float: left;
}

.f_right {
float: right;
}

.clearfix::before,
.clearfix::after {
content: '';
display: block;
visibility: hidden;
height: 0;
line-height: 0;
clear: both;
}

.m_t10 {
margin-top: 10px;
}

.m_l10 {
margin-left: 10px;
}

.m_r10 {
margin-right: 10px;
}

.m_b10 {
margin-bottom: 10px;
}

// @import 'var';
// @import 'mixin';
// @import 'adapter';
// @import 'reset';

 即可避免每个组件都要引入这里less文件了。

mint-ui

mint-ui官网

安装mint-ui组件库

npm i mint-ui --save

按需导入（需要安装 babel-plugin-component）

安装：npm install babel-plugin-component -D

配置.babel文件

 

[code]{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}

具体操作看官方文档

使用mui移动端框架

在构建好页面后，完成底部导航操作时遇见的问题

1. 发现mui字体图标没有想要的购物车和分页的字体图标时在字体图标扩展中找到了该字体图标，使用时没有效果，发现少了对应的icons-extra.css文件和mui-icons-extra.ttf文件，将这两个文件引入后，效果出现
2. 更改a连接为router-link链接，使用router-link对应的.router-link-active类进行点击选中高亮的显示（路由文件中更改了linkActiveClass属性值）

在完成顶部局域滚动导航时遇见的问题

1. 引入mui.js文件中，出现了Uncaught TypeError: ‘caller’, ‘callee’, and ‘arguments’ properties may not be accessed on strict mode functions or the arguments objects for calls to them错误，意思是vue-cli创建的项目开启了严格模式，与mui框架冲突了，此时解决的办法是：安装babel-plugin-transform-remove-strict-mode这个插件，用于移除严格模式

npm install babel-plugin-transform-remove-strict-mode -D

在.babel文件中去掉 plugins 中的 “transform-vue-jsx”, “transform-runtime”，加入"transform-remove-strict-mode"

[code]{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": [
["transform-remove-strict-mode"],
["component", [{
"libraryName": "mint-ui",
"style": true
}]]
]
}

就解决了报错的问题

• 滑动时，谷歌浏览器弹出警告的解决

  [code]* {
  touch-action: pan-y; /* 解决谷歌浏览器滑动出现警告 */
  }

• 发现底部导航栏已经不能实现跳转了，解决方法：更改底部导航栏的类，（先保留原有的类样式.mui-tab-item相关，后更改类名即可）

使用mint-ui组件库实现图片的懒加载时遇到的问题

• 按需导入文件后，将图片路径src属性替换成v-lazy属性
• 官方文档中css样式image写成img 

使用vuex实现数据共享

安装  npm i vuex --save-dev

 

首页搜索功能的跳转实现

在搜索页面中，是不会有底部导航栏的，处理过程

1. 给底部导航栏添加v-show指令
2. watch监听路由变化$route.path，如果是搜索页，那么让v-show指令为false，如果不是则为true（默认是true）
3. 搜索页面刷新，则依然会显示底部导航栏，所以在页面创建时created就进行判断：三木运算符操作同上一步

组件之间的动画切换特效

[code]      <transition>
<router-view></router-view>
</transition>

<style>
.v-enter {
opacity: 0;
transform: translateY(100%);
}
.v-leave-to {
opacity: 0;
transform: translateY(-100%);
position: absolute; /*解决动画从下往上的影响*/
}
.v-enter-active,
.v-leave-active {
transition: all 0.3s ease;
}

#app{
overflow-x: hidden; /*解决组件动画移动时带来的滚动条影响*/
}
</style>

 

 

 

 

 

 

 

 

 

打包时遇到的问题( npm run build )

• 出现SVG错误（原因是使用了mui.css文件）

​​​​​​​

解决方案：修改mui.css文件中SVG的单引号为双引号

正常打包

打包后发现直接在本地打开index.html没有效果

原因：打包的目录默认生成在项目根目录，路径不对，此时想要在打包好的dist目录下运行，需要更改一下配置

配置1：js文件

配置2：css文件

再次运行npm run build 进行打包即可

 

 

 

 

项目地址：https://gitee.com/weiZhiXiang1219/top_mall