使用vue-cli2.+搭建脚手架vue仿小米商城Web

安装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文件（模拟服务端数据请求）

                      
省略

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

import './mock'

---

使用vue-resource发送请求

安装vue-resouce

npm i vue-resource --save

 

在main.js中，引入并配置

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

---

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

比如：在App.vue中

 

 

 

 

 

 

 

 

 

---

打包时遇到的问题( 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