3.前端项目搭建

3.前端项目搭建

3.1.开发环境检查

检查cnpm安装环境：命令行下输入：cnpm -v
检查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模板工程

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

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

添加font-awesome与axios依赖：

npm install font-awesome --save <br />       npm install axios --save <br />       npm install qs --save

添加图片到src的assets中。

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

//获取当前时间（XXXX-XX-XX）
export function getCurDate() {
 var now = new Date();
 var year = now.getFullYear();
 var month = now.getMonth() + 1;
 var day = now.getDate();
 month = month < 10 ? "0" + month : month;
 day = day < 10 ? "0" + day : day;
 return year + "-" + month + "-" + day;
}
//向sessionStorage中存储一个JSON对象
export function setSessionStorage(keyStr, value) {
 sessionStorage.setItem(keyStr, JSON.stringify(value));
}
//从sessionStorage中获取一个JSON对象（取不到时返回null）
export function getSessionStorage(keyStr) {
 var str = sessionStorage.getItem(keyStr);
 if (str == '' || str == null || str == 'null' || str == undefined) {
     return null;
 } else {
     return JSON.parse(str);
 }
}
//从sessionStorage中移除一个JSON对象
export function removeSessionStorage(keyStr) {
 sessionStorage.removeItem(keyStr);
}
//向localStorage中存储一个JSON对象
export function setLocalStorage(keyStr, value) {
 localStorage.setItem(keyStr, JSON.stringify(value));
}
//从localStorage中获取一个JSON对象（取不到时返回null）
export function getLocalStorage(keyStr) {
 var str = localStorage.getItem(keyStr);
 if (str == '' || str == null || str == 'null' || str == undefined) {
     return null;
 } else {
     return JSON.parse(str);
 }
}
//从localStorage中移除一个JSON对象
export function removeLocalStorage(keyStr) {
 localStorage.removeItem(keyStr);
}

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

module.exports = {
 devServer: {
     port: 8081
 }
}

3.2.3.main.js文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'font-awesome/css/font-awesome.min.css'
import axios from 'axios'
import qs from 'qs'
//导入自定义模块
import {
 getCurDate,
 setSessionStorage,
 getSessionStorage,
 removeSessionStorage,
 setLocalStorage,
 getLocalStorage,
 removeLocalStorage
} from './common.js'
Vue.config.productionTip = false
//设置axios的基础url部分
axios.defaults.baseURL = 'http://localhost:8080/elm/';
//将axios挂载到vue上，使用是就可以 this.$axios 这样使用了
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;
Vue.prototype.$getCurDate = getCurDate;
Vue.prototype.$setSessionStorage = setSessionStorage;
Vue.prototype.$getSessionStorage = getSessionStorage;
Vue.prototype.$removeSessionStorage = removeSessionStorage;
Vue.prototype.$setLocalStorage = setLocalStorage;
Vue.prototype.$getLocalStorage = getLocalStorage;
Vue.prototype.$removeLocalStorage = removeLocalStorage;
router.beforeEach(function(to, from, next) {
 let user = sessionStorage.getItem('user');
 //除了登陆、注册、首页、商家列表、商家信息之外，都需要判断是否登陆了
 if (!(to.path == '/' || to.path == '/index' || to.path == '/businessList' || to.path == '/businessInfo' || to.path ==
         '/login' || to.path == '/register')) {
     if (user == null) {
         router.push('/login');
         location.reload();
     }
 }
 next();
});
new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')

3.2.4.App.vue文件

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

<template>
 <div id="app">
     <router-view />
 </div>
</template>
<!-- 注意这里为共通样式，不能加scoped -->
<style>
 /*这里的内容，就是静态工程中的 reset.css*/
 html,body,div,span,h1,h2,h3,h4,h5,h6,ul,ol,li,p {
     margin: 0;
     padding: 0;
     font-family: "微软雅黑";
 }
 html,body,#app {
     /*必须要设置，这样总容器高度才能100%*/
     width: 100%;
     height: 100%;
 }
 ul,ol {
     list-style: none;
 }
 a {
     text-decoration: none;
 }
</style>

3.2.5.路由index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/Index.vue'
import BusinessList from '../views/BusinessList.vue'
// ... ...
Vue.use(VueRouter)
const routes = [{
     path: '/',
     name: 'Home',
     component: Index
 },{
     path: '/index',
     name: 'Index',
     component: Index
 },{
     path: '/businessList',
     name: 'BusinessList',
     component: BusinessList
 },{
     // ... ...
 }
]
//解决重复路由报异常问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
 return originalPush.call(this, location).catch(err => err)
}
const router = new VueRouter({
 mode: 'history',
 base: process.env.BASE_URL,
 routes
})
export default router

3.3.共通组件

3.3.1.Footer组件：

<template>
 <!-- 底部菜单部分 -->
 <ul class="footer">
     <li @click="toIndex">
         <i class="fa fa-home"></i>
         <p>首页</p>
     </li>
     <li>
         <i class="fa fa-compass"></i>
         <p>发现</p>
     </li>
     <li @click="toOrderList">
         <i class="fa fa-file-text-o"></i>
         <p>订单</p>
     </li>
     <li @click="toUserCenter">
         <i class="fa fa-user-o"></i>
         <p>我的</p>
     </li>
 </ul>
</template>
<script>
 export default{
     name:'Footer',
     data(){
         return {
             user:{}
         }
     },
     methods:{
         toIndex(){
             this.$router.push('/index');
         },
         toOrderList(){
             this.user = this.$getSessionStorage('user');
             if(this.user==null){
                 this.$router.push('/login');
             }else{
                 this.$router.push('/orderList');
             }
         },
         toUserCenter(){
             this.user = this.$getSessionStorage('user');
             if(this.user==null){
                 this.$router.push('/login');
             }else{
                 this.$router.push('/userCenter');
             }
         }
     }
 }
</script>
<style scoped>
 /****************** 底部菜单部分 ******************/
 .wrapper .footer{
     width: 100%;
     height: 14vw;
     border-top: solid 1px #DDD;
     background-color: #fff;
     position: fixed;
     left: 0;
     bottom: 0;
     display: flex;
     justify-content: space-around;
     align-items: center;
 }
 .wrapper .footer li{
     /*li本身的尺寸完全由内容撑起*/
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     color: #999;
     user-select: none;
     cursor: pointer;
 }
 .wrapper .footer li p{
     font-size: 2.8vw;
 }
 .wrapper .footer li i{
     font-size: 5vw;
 }
</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)

Java互联网架构课件（校园）

03.前端项目搭建

3.前端项目搭建

3.1.开发环境检查

3.2.搭建VueCli工程总体架构

3.2.1.搭建VueCli模板工程

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

3.2.3.main.js文件

3.2.4.App.vue文件

3.2.5.路由index.js文件

3.3.共通组件

3.3.1.Footer组件：