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