（一）Vue项目——微商城：搭建Vue开发环境

目录

1.安装Vue脚手架

2.安装vue-router

3.安装Vuex

4.安装Mint UI

5.安装MUI

6.安装sass

页面布局

1.设置标题

2.页面头部

---

1.安装Vue脚手架

右键项目，如下操作，打开命令行终端

在命令行中安装Vue脚手架

npm install @vue/cli@3.10 -g

2.安装vue-router

安装路由：

npm install vue-router@3.1 --save

创建路由文件src\router.js

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

import Home from './components/HelloWorld.vue'

var router = new VueRouter({

  routes: [

    { path: '/', redirect: '/home' },

    { path: '/home', component: Home, name: 'home' }

  ]

})

export default router

修改src\main.js文件

import Vue from 'vue'

import App from './App.vue'

import router from './router.js'

Vue.config.productionTip = false

new Vue({

  router,

  render: h => h(App),

}).$mount('#app')

启动服务测试。

npm run serve

会看到地址栏出现了“/#/home”

3.安装Vuex

安装Vuex

npm install vuex@3.1 --save

修改src\main.js文件

在import App from './App.vue' 下引入：

import store from './store'

修改：

new Vue({

  store,

  router,

  render: h => h(App),

}).$mount('#app')

创建vuex文件src\store\index.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  modules: {

  }

})

4.安装Mint UI

安装Mint UI

npm install mint-ui@2.2 --save

在main.js文件中，在new Vue前面，引入：

import MintUI from 'mint-ui'

import 'mint-ui/lib/style.css'

Vue.use(MintUI)

5.安装MUI

下载MUI，

https://github.com/dcloudio/mui

（也可以直接使用源码包里的文件）

放到src\lib目录下。

在main.js文件中的import 'mint-ui/lib/style.css'下面添加代码，引入MUI的样式文件。

import './lib/mui/css/mui.css'

import './lib/mui/css/icons-extra.css'

由于MUI的代码在ES Lint的语法检查中不通过，

为了避免保存，将MUI的js目录从语法检查中排除。

在项目的根目录下，创建.eslintignore文件，内容如下。

src/lib/mui/js

6.安装sass

安装

npm install sass-loader@8.0 --save-dev

npm install node-sass@4.13 --save-dev

npm install sass@^1.3.0 --save-dev

npm install fibers@>= 3.1.0 --save-dev

重新编写src\App.vue

<template>

  <div class="container">

    <router-view></router-view>

  </div>

</template>

<script>

export default {

}

</script>

<style lang="scss" scoped>

#app {

  font-family: "Avenir", Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  box-sizing: border-box;

}

.container {

  padding-top: 40px;

  padding-bottom: 50px;

  overflow-x: hidden;

}

</style>

修改src\components\HelloWorld.vue

<template>

  <div>

    Hello World

  </div>

</template>

运行一下测试。

npm run serve 

页面布局

1.设置标题

设置标题

src\router.js

routes: [

    { path: '/', redirect: '/home', meta: { title: '首页' } },

    { path: '/home', component: Home, name: 'home', meta: { title: '首页' } }

]

router.beforeEach((to, from, next) => {

  if (to.meta.title) {

    document.title = to.meta.title

  }

  next()

})

2.页面头部

src\App.vue

<div class="container">

  <mt-header fixed :title="$route.meta.title">

  </mt-header>

  <router-view></router-view>

</div>

 恭喜你，已经完成第一步啦，记得关注我，学习技术路上，与你同在。>L<