Vue前端项目实战

一、脚手架的使用

首先下载yarn

npm i -g yarn

再下载vue cil

打开cmd，输入

vue create vue-app

选择vue2

构建完成，项目目录如下

二、使用饿了么UI（ElementUI）

npm i element-ui -S

再main.js中写入以下内容导入ElementUI（全局引入）：

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
  render: h => h(App),
}).$mount('#app')

如果要部分引入，那么要配置babel，并导入部分

如下：

import Vue from 'vue'
import App from './App.vue'
/* import ElementUI from 'element-ui'; */
import {Row,Button} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
/* Vue.use(ElementUI) */
Vue.use(Row)
Vue.use(Button)
new Vue({
  render: h => h(App),
}).$mount('#app')

三、Vue Router

npm i vue-router@3.6.5

然后再router下面新建文件夹新建文件用于路由

在index.js中写入以下内容

import Vue from 'vue'
import VueRouter from 'vue-router';
Vue.use(VueRouter)
//创建路由组件,并导入
import Home from '../view/Home.vue'
import User from '../view/User.vue'
//将路由与组件进行映射
const routes =[
    {path:'/home', component: Home},
    {path:'/user', component: User}

]
//创建router实例,并把映射传入
const router =new VueRouter({
    routes
})
//将router导出
export default router
//将其导入主入口main.js,并挂载到Vue对象上

接下来要规定路由的出口

在App.vue下，当然也不是必须在这里，可以在很多地方规定出口

<template>
  <div id="app">
    <!-- <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row> -->
    <router-view></router-view>
  </div>
</template>


<script>
export default {
  name: "App"
};
</script>

四、嵌套路由router（为了降低代码耦合性）

可以让同样的组件在不同子组件中展示

新建一个main.vue

再进行导入index.js进行路由存储

import Vue from 'vue'
import VueRouter from 'vue-router';
Vue.use(VueRouter)
//创建路由组件,并导入
import Home from '../view/Home.vue'
import User from '../view/User.vue'
import Main from '../view/Main.vue'
//将路由与组件进行映射
const routes =[
    //主路由
    {
        path:'/',
        component:Main,
        children:[
            //子路由
            {path:'/home', component: Home},
            {path:'/user', component: User} 
        ]
    },

]
//创建router实例,并把映射传入
const router =new VueRouter({
    routes
})
//将router导出
export default router
//将其导入主入口main.js,并挂载到Vue对象上

再规定路由出口，谁是最上层的路由，在谁那规定出口

比如这个就是Main是主路由，其余二者为子路由

<template>
    <div>
    <h1>我是main</h1>
    <router-view></router-view>
    </div>

</template>


<script>
export default{
    data(){
        return {}
    }
}
</script>

这样就可以了

五、使用饿了么UI（ElementUI左侧导航栏实现）

对于单一的页面元素，比如导航栏这种东西我们独划分出来作为一个单独的组件来管理，方便运维，在组件中新建一个组件，这里我写左侧导航栏用

在使用这个组件的主路由下引用组件

<script>
import CommondAside from '../components/CommondAsdie.vue'
export default {
  data() {
    return {};
  },
  components:{
    CommondAside
  }
};
</script>

调用格式如下

<el-aside width="200px"><commond-aside></commond-aside></el-aside>

对菜单格式进行调整，在属性中寻找自己需要修改的属性。

向菜单中传递数据

menuData: [
        {
          path: "/",
          name: "home",
          label: "首页",
          icon: "s-home",
          url: "Home/Home",
        },
        {
          path: "/mall",
          name: "mall",
          label: "商品管理",
          icon: "video-play",
          url: "MallManage/MallManage",
        },
        {
          path: "/user",
          name: "user",
          label: "用户管理",
          icon: "user",
          url: "UserManage/UserManage",
        },
        {
          label: "其他",
          icon: "location",
          children: [
            {
              path: "/page1",
              name: "page1",
              label: "页面1",
              icon: "setting",
              url: "Other/PageOne",
            },
            {
              path: "/page2",
              name: "page2",
              label: "页面2",
              icon: "setting",
              url: "Other/PageTwo",
            },
          ],
        },
      ]

那么拿到这么多数据后我们要怎么去改变菜单呢，这里我们使用computed属性进行数据的计算，同时进行绑定

computed: {
    //没有子菜单
    noChildren() {
      return this.menuData.filter((item) => !item.children);
    },
    //有子菜单
    hasChildren() {
      return this.menuData.filter((item) => item.children);
    }
  },

这样就区分开了一级菜单和二级菜单

一级菜单导航

同时对于一级菜单的部分我们可以直接v-for进行动态渲染

    <el-menu-item v-for="item in noChildren" :key="item.name" :index="item.name">
      <!--:指的是v-bind，用来数据绑定 -->
      <i :class="`el-icon-${item.icon}`"></i><!-- 这里的冒号指的是动态字符串 ``并不是'' es6拼接写法 -->
      <span slot="title">{{ item.label }}</span>
    </el-menu-item>

二级菜单导航

观察数据，因为key要提供唯一且固定的值，所以我们在子菜单中所使用的值就是label，path等不同的唯一值

<el-submenu
      v-for="item in hasChildren"
      :key="item.label"
      :index="item.label"
    >
      <template slot="title">
        <i :class="`el-icon-${item.icon}`"></i>
        <span slot="title">{{ item.label }}</span>
      </template>
      <el-menu-item-group v-for="subItem in item.children" :key="subItem.path">
        <el-menu-item :index="subItem.path">{{ subItem.label }}</el-menu-item>
      </el-menu-item-group>
    </el-submenu>

六、引入less

由于基本的css太过于繁琐，我们这里采取less去写

npm i less@4.1.2

npm i less-loder@6.0.0

<style lang="less" scope>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>

这里在vue文件中引入，其中lang=“less”指的是引入less在这个style里面，然后scope是这个style只作用当前组件。

语法如下：（嵌套）

.el-menu{
  height: 100vh;
  h3{
    color:#fff;
    text-align: center;
    
  }
}

七、进行路由

这里创建多个页面，因为数据中的/路径是home，所以我们要重定向，redirect:'/home'

const routes =[
    //主路由
    {
        path:'/',
        component:Main,
        redirect:'/home',
        children:[
            //子路由
            {path:'/home', component: Home},
            {path:'/user', component: User},
            {path:'/mall', component: Mall},
            {path:'/page1', component: PageOne},
            {path:'/page2', component: PageTwo}
        ]
    },

]

在对应标签下调用点击函数，并使用&router.push方法进行跳转

ClickMenu(item){
      this.$router.push(item.path)
    },
    ClickSubMenu(subItem){
      this.$router.push(subItem.path)
    }

这里vue限制了用户不能跳转到当前页面，所以要用逻辑去判断一下要跳转的页面是否与当前页面一致，如果不一致才要跳转，$route表示当前路由

    ClickMenu(item){
      if(this.$route.path!==item.path&& !(this.$route.path==='/home'&&(item.path==='/')))
      this.$router.push(item.path)
    },
    ClickSubMenu(subItem){
      if(this.$route.path!==subItem.path)
      this.$router.push(subItem.path)
    }

八、进行顶部编写

<template>
    <div class="header-container">
        <div class="l-content">

        </div>

        <div class="r-content">

        </div>
    </div>

</template>

<script>
export default {
    data(){
        return{}
    }
}
</script>

<style lang="less" scoped>
    .header-container{
        background-color: #333;
        height: 60px;
    }


</style>

在主页面进行覆盖padding

<style lang="less" scoped>
.el-header{
  padding:0;
}
</style>

九、vuex状态管理实现左侧折叠

npm i vuex@3.6.2

这里可能会有个错误，要修改json的设置，ctrl+shift+P，搜索首选项进行修改。

新建文件夹store，再新建index.js再创建其他组件的js，把需要改变的值放在state里面去管理，然后以事件形式采用提交函数调用mutations里面的修改函数，而需要被修改的页面去获取state里面的属性就完成了整个传递

state如下

export default{
    state:{
        isCollapse:false
    },
    mutations: {
        collapseMenu(state){
            state.isCollapse= !state.isCollapse
        }
    }
}

提交函数如下

methods:{
    hadeleMenu(){
      this.$store.commit('collapseMenu')
    }
  }

获取函数如下

 isCollapse() {
      return this.$store.state.tab.isCollapse
    }