第一个Vue项目mjdai_auto_office之项目简介

前言

一直想开发一个功能比较强大的项目，但是一直没有动手，最近终于有点时间来折腾它了。由于时隔两年没有接触前端了，所以需要一个小项目先练练手感。等这个项目完工之后在着手搞一个大工程。都说好记星不如烂笔头，现在就将这一个过程记录下来，万一有什么踩坑的地方，也可以提示后来人。

项目介绍

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 关闭环境相关的提示
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <div id="nav">
      <!-- 相当于a标签to相当于href-->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

// 导出组件，在其他地方可以使用import导入并使用。
export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

./router/index.js

import Vue from 'vue'
// 安装路由
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // lambda表达式，不提前导入组件，在使用的时候导入组件，类似懒加载
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

// 新建VueRouter的实例
const router = new VueRouter({
  routes
})
// 导出路由，方便在其他地方使用
export default router

以上是刚刚创建项目的样子，接下来需要慢慢完善项目。

引入ElementUI

ElementUI使用的话，请自行前往官网,这个还是中文的，非常的友好。

安装

npm i element-ui -S

报错，解决方案是需要升级

npm install -save -g core-js@^3

main.js引入elementUI

import Vue from 'vue'
// 引入全局
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import router from './router'

// 关闭环境相关的提示
Vue.config.productionTip = false

// 使用
Vue.use(ElementUI);

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

修改App.vue

<template>
  <div id="app">
    <div id="nav">
      <!-- 删除默认的代码-->

    </div>
    <router-view/>
  </div>
</template>

<style>
  <!-- 删除样式-->

</style>

删除默认的组件

新建Login组件

<template>
    <div>Login</div>
</template>

<script>
    export default {
        name: "Login"
    }
</script>
<style scoped>
</style>

配置路由

import Vue from 'vue'
// 安装路由
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  }
  // {
  //   path: '/about',
  //   name: 'About',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   // lambda表达式，不提前导入组件，在使用的时候导入组件，类似懒加载
  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  // }
]

// 新建VueRouter的实例
const router = new VueRouter({
  routes
})
// 导出路由，方便在其他地方使用
export default router

重启

> mjdai_auto_office@0.1.0 serve D:\workspaces\mjdai_auto_office
> vue-cli-service serve

界面发生变化

下一篇将介绍使用elementUI搭建界面