3.前端项目搭建

3.1.开发环境检查

  1. 检查cnpm安装环境： 命令行下输入：cnpm -v
  2. 检查VueCli安装环境：命令行下输入：vue -V （注意：本工程使用VueCli4.0.0以上版本）

    附录：

    1. 安装npm：直接安装node.js （输入 “npm -v” 测试是否安装成功； 输入 node –v 查看node版本）
    2. 安装cnpm：npm install -g cnpm —registry=https://registry.npm.taobao.org
    3. 全局安装vuecli：cnpm install -g @vue/cli （或：npm install -g @vue/cli@4.x.x）
    4. 查看当前安装的vue-cli版本：vue —version 或 vue –V
    5. 卸载旧版本的vue-cli：cnpm uninstall vue-cli -g
    6. 查看远程仓库中的版本号：cnpm view @vue/cli versions —json

3.2.搭建VueCli工程总体架构

3.2.1.搭建VueCli模板工程

  1. 命令行下进入工作空间目录中，输入： vue create elmclient （工程名必须小写）
  2. 选择预设模板：这里选择“Manually select features”（手动选择特征）
  3. 模块选取：Babel、Router
  4. 选择是否使用history 形式的路由：选择：Y
  5. 将依赖文件放在package.json中：选择：“in package.json”
  6. 是否将当前选择保存以备下次使用：选择：N
  7. 进入创建好的工程目录：cd elmclient
  8. 启动工程：npm run serve

  9. 在浏览器中测试：http://localhost:8080

    3.2.2.添加其它依赖及配置文件

  10. 添加font-awesome与axios依赖： 

    1. cnpm install font-awesome –save 
    2. cnpm install axios - -save 
    3. cnpm install qs - -save

  11. 添加图片到src的assets中。

  12. 在src目录下添加common.js文件

    1. //获取当前时间（XXXX-XX-XX）
    2. export function getCurDate() {
    3.  var now = new Date();
    4.  var year = now.getFullYear();
    5.  var month = now.getMonth() + 1;
    6.  var day = now.getDate();
    7.  month = month < 10 ? "0" + month : month;
    8.  day = day < 10 ? "0" + day : day;
    9.  return year + "-" + month + "-" + day;
    10. }
    11. //向sessionStorage中存储一个JSON对象
    12. export function setSessionStorage(keyStr, value) {
    13.  sessionStorage.setItem(keyStr, JSON.stringify(value));
    14. }
    15. //从sessionStorage中获取一个JSON对象（取不到时返回null）
    16. export function getSessionStorage(keyStr) {
    17.  var str = sessionStorage.getItem(keyStr);
    18.  if (str == '' || str == null || str == 'null' || str == undefined) {
    19.      return null;
    20.  } else {
    21.      return JSON.parse(str);
    22.  }
    23. }
    24. //从sessionStorage中移除一个JSON对象
    25. export function removeSessionStorage(keyStr) {
    26.  sessionStorage.removeItem(keyStr);
    27. }
    28. //向localStorage中存储一个JSON对象
    29. export function setLocalStorage(keyStr, value) {
    30.  localStorage.setItem(keyStr, JSON.stringify(value));
    31. }
    32. //从localStorage中获取一个JSON对象（取不到时返回null）
    33. export function getLocalStorage(keyStr) {
    34.  var str = localStorage.getItem(keyStr);
    35.  if (str == '' || str == null || str == 'null' || str == undefined) {
    36.      return null;
    37.  } else {
    38.      return JSON.parse(str);
    39.  }
    40. }
    41. //从localStorage中移除一个JSON对象
    42. export function removeLocalStorage(keyStr) {
    43.  localStorage.removeItem(keyStr);
    44. }

  13. 在工程根目录下添加vue.config.js文件

    1. module.exports = {
    2.  devServer: {
    3.      port: 8081
    4.  }
    5. }

    3.2.3.main.js文件

    1. import Vue from 'vue'
    2. import App from './App.vue'
    3. import router from './router'
    4. import store from './store'
    5. import 'font-awesome/css/font-awesome.min.css'
    6. import axios from 'axios'
    7. import qs from 'qs'
    8. //导入自定义模块
    9. import {
    10.  getCurDate,
    11.  setSessionStorage,
    12.  getSessionStorage,
    13.  removeSessionStorage,
    14.  setLocalStorage,
    15.  getLocalStorage,
    16.  removeLocalStorage
    17. } from './common.js'
    18. Vue.config.productionTip = false
    19. //设置axios的基础url部分
    20. axios.defaults.baseURL = 'http://localhost:8080/elm/';
    21. //将axios挂载到vue上，使用是就可以 this.$axios 这样使用了
    22. Vue.prototype.$axios = axios;
    23. Vue.prototype.$qs = qs;
    24. Vue.prototype.$getCurDate = getCurDate;
    25. Vue.prototype.$setSessionStorage = setSessionStorage;
    26. Vue.prototype.$getSessionStorage = getSessionStorage;
    27. Vue.prototype.$removeSessionStorage = removeSessionStorage;
    28. Vue.prototype.$setLocalStorage = setLocalStorage;
    29. Vue.prototype.$getLocalStorage = getLocalStorage;
    30. Vue.prototype.$removeLocalStorage = removeLocalStorage;
    31. router.beforeEach(function(to, from, next) {
    32.  let user = sessionStorage.getItem('user');
    33.  //除了登陆、注册、首页、商家列表、商家信息之外，都需要判断是否登陆了
    34.  if (!(to.path == '/' || to.path == '/index' || to.path == '/businessList' || to.path == '/businessInfo' || to.path ==
    35.          '/login' || to.path == '/register')) {
    36.      if (user == null) {
    37.          router.push('/login');
    38.          location.reload();
    39.      }
    40.  }
    41.  next();
    42. });
    43. new Vue({
    44.  router,
    45.  store,
    46.  render: h => h(App)
    47. }).$mount('#app')

    3.2.4.App.vue文件

    注意：在App.vue文件中，#app的高度也要设置为100%。

    1. <template>
    2.  <div id="app">
    3.      <router-view />
    4.  </div>
    5. </template>
    6. <!-- 注意这里为共通样式，不能加scoped -->
    7. <style>
    8.  /*这里的内容，就是静态工程中的 reset.css*/
    9.  html,body,div,span,h1,h2,h3,h4,h5,h6,ul,ol,li,p {
    10.      margin: 0;
    11.      padding: 0;
    12.      font-family: "微软雅黑";
    13.  }
    14.  html,body,#app {
    15.      /*必须要设置，这样总容器高度才能100%*/
    16.      width: 100%;
    17.      height: 100%;
    18.  }
    19.  ul,ol {
    20.      list-style: none;
    21.  }
    22.  a {
    23.      text-decoration: none;
    24.  }
    25. </style>

    3.2.5.路由index.js文件

    1. import Vue from 'vue'
    2. import VueRouter from 'vue-router'
    3. import Index from '../views/Index.vue'
    4. import BusinessList from '../views/BusinessList.vue'
    5. // ... ...
    6. Vue.use(VueRouter)
    7. const routes = [{
    8.      path: '/',
    9.      name: 'Home',
    10.      component: Index
    11.  },{
    12.      path: '/index',
    13.      name: 'Index',
    14.      component: Index
    15.  },{
    16.      path: '/businessList',
    17.      name: 'BusinessList',
    18.      component: BusinessList
    19.  },{
    20.      // ... ...
    21.  }
    22. ]
    23. //解决重复路由报异常问题
    24. const originalPush = VueRouter.prototype.push
    25. VueRouter.prototype.push = function push(location) {
    26.  return originalPush.call(this, location).catch(err => err)
    27. }
    28. const router = new VueRouter({
    29.  mode: 'history',
    30.  base: process.env.BASE_URL,
    31.  routes
    32. })
    33. export default router

    3.3.共通组件

    3.3.1.Footer组件：

    1. <template>
    2.  <!-- 底部菜单部分 -->
    3.  <ul class="footer">
    4.      <li @click="toIndex">
    5.          <i class="fa fa-home"></i>
    6.          <p>首页</p>
    7.      </li>
    8.      <li>
    9.          <i class="fa fa-compass"></i>
    10.          <p>发现</p>
    11.      </li>
    12.      <li @click="toOrderList">
    13.          <i class="fa fa-file-text-o"></i>
    14.          <p>订单</p>
    15.      </li>
    16.      <li @click="toUserCenter">
    17.          <i class="fa fa-user-o"></i>
    18.          <p>我的</p>
    19.      </li>
    20.  </ul>
    21. </template>
    22. <script>
    23.  export default{
    24.      name:'Footer',
    25.      data(){
    26.          return {
    27.              user:{}
    28.          }
    29.      },
    30.      methods:{
    31.          toIndex(){
    32.              this.$router.push('/index');
    33.          },
    34.          toOrderList(){
    35.              this.user = this.$getSessionStorage('user');
    36.              if(this.user==null){
    37.                  this.$router.push('/login');
    38.              }else{
    39.                  this.$router.push('/orderList');
    40.              }
    41.          },
    42.          toUserCenter(){
    43.              this.user = this.$getSessionStorage('user');
    44.              if(this.user==null){
    45.                  this.$router.push('/login');
    46.              }else{
    47.                  this.$router.push('/userCenter');
    48.              }
    49.          }
    50.      }
    51.  }
    52. </script>
    53. <style scoped>
    54.  /****************** 底部菜单部分 ******************/
    55.  .wrapper .footer{
    56.      width: 100%;
    57.      height: 14vw;
    58.      border-top: solid 1px #DDD;
    59.      background-color: #fff;
    60.      position: fixed;
    61.      left: 0;
    62.      bottom: 0;
    63.      display: flex;
    64.      justify-content: space-around;
    65.      align-items: center;
    66.  }
    67.  .wrapper .footer li{
    68.      /*li本身的尺寸完全由内容撑起*/
    69.      display: flex;
    70.      flex-direction: column;
    71.      justify-content: center;
    72.      align-items: center;
    73.      color: #999;
    74.      user-select: none;
    75.      cursor: pointer;
    76.  }
    77.  .wrapper .footer li p{
    78.      font-size: 2.8vw;
    79.  }
    80.  .wrapper .footer li i{
    81.      font-size: 5vw;
    82.  }
    83. </style>

    [

](https://null_688_6639.gitee.io/javase/18%E5%89%8D%E5%90%8E%E7%AB%AF%E9%A1%B9%E7%9B%AE/02%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E9%A1%B9%E7%9B%AE%E6%90%AD%E5%BB%BA.html)