vue手机商城项目实战（1）-环境搭建

学完vue后我们使用vue相关技术，来实现一个简易版手机商城的项目，第一步我们就是确定使用的技术与实现的大概功能，并搭建好相关的环境。

一、手机商城项目介绍

1、手机商城项目涉及功能模块大致如下：

2、涉及前端技术如下：

vue：主要开发技术
vue-cli：脚手架
vue-router：路由
vuex：状态共享
axios：异步请求
Mint UI：移动端框架
vue-awesome：图标库

如果以上技术有不会使用的，可以搜索参考我的博文。

一、环境搭建

1、项目创建

基于vue-cli脚手架，创建名为shop-app的vue项目，这里我直接使用HBuildX来创建。

2、安装依赖

打开shop-app项目终端，依次运行如下命令：
1）安装路由

npm install vue-router

2）安装vuex

npm install vuex --save

3）安装axios

npm install axios

4）安装Mint UI

npm install mint-ui -S

5）安装vue-awesome

npm install vue-awesome

安装好后，此时package.json依赖如下：

  "dependencies": {
    "axios": "^0.20.0",
    "core-js": "^2.6.5",
    "mint-ui": "^2.2.13",
    "vue": "^2.6.10",
    "vue-awesome": "^4.1.0",
    "vue-router": "^3.4.3",
    "vuex": "^3.5.1"
  },

3、配置依赖

1）在配置依赖前把无用的自动生成的HelloWorld.vue、logo.png等相关的删除，在此不再赘述。
2）在src下新建router目录，在router目录下新建index.js文件，代码如下：

// 1、导入vue-router
import VueRouter from 'vue-router'
// 2、导入vue
import Vue from 'vue'
// 3、安装
Vue.use(VueRouter)
// 4、创建VueRouter实例-路由对象
const router = new VueRouter({
    // 5、配置路由
    //5.1配置路模式
    mode:"history",
    // 5.2 配置路由对象数组
    routes: [
        // 待配置-使用懒加载
    ]
})
// 6、导出路由对象
export default router;

3）在src下新建store目录，在store下新建index.js，代码如下：

import Vue from 'vue'
// 导入vuex
import Vuex from 'vuex'
//挂载Vuex
Vue.use(Vuex)
 
//创建Vuex对象
const store = new Vuex.Store({
    state:{
        //存放的键值对就是所要管理的状态，待配置
    }
})
// 默认导出store
export default store

4）在main.js中配置相关组件，修改main.js如下：

import Vue from 'vue'
import App from './App.vue'
// 导入路由，/index.js可以省略会自动加载
import router from './router'
// 导入store
import store from './store'
// 引入Mint全部组件
import Mint from 'mint-ui';
// 引入Mint样式
import 'mint-ui/lib/style.css'
// 一次引入全部图标
import 'vue-awesome/icons'
// 导入vue-awesome组件
import Icon from 'vue-awesome/components/Icon'
// 安装Mint
Vue.use(Mint);
// 全局注册Icon
Vue.component('icon', Icon)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 注入路由到vue实例中
  router,
  // 注入store到vue实例中
  store
}).$mount('#app')

至此，环境配置完成，我们来看下现在的整体目录结构：