vue手机商城项目实战(1)-环境搭建

Web前端 潘老师 4年前 (2020-09-14) 3680 ℃ (0) 扫码查看

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

1、手机商城项目涉及功能模块大致如下:
vue手机商城项目实战(1)-环境搭建

2、涉及前端技术如下:

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

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

1、项目创建

基于vue-cli脚手架,创建名为shop-app的vue项目,这里我直接使用HBuildX来创建。
vue手机商城项目实战(1)-环境搭建

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

vue手机商城项目实战(1)-环境搭建
安装好后,此时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.vuelogo.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')

至此,环境配置完成,我们来看下现在的整体目录结构:
vue手机商城项目实战(1)-环境搭建


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/java/web/1237.html
喜欢 (12)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】