Vue快速搭建项目框架
基本配置
# 创建一个叫hello-vue的项目
vue init webpack hello-vue
#安装vue-router
npm install vue-router --save-dev
#安装element-ui
npm i element-ui -S
#安装依赖
npm install
若是eslint未关闭造成开启了严格模式,可在config/index.js下修改参数
useEslint: false,
建立路由
index.js
import Vue from 'vue'
import Router from 'vue-router'
import App from "../App";
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component:App,
},
]
})
注册路由
main.js
import Vue from 'vue'
import App from './App'
//导入上面创建的路由配置目录
import router from './router'//自动扫描里面的路由配置
//引入全局css文件没有则不用
//import 'bootstrap/dist/css/bootstrap.css'
//来关闭生产模式下给出的提示
Vue.config.productionTip = false;
Vue.use(router)
new Vue({
el:"#app",
//配置路由
router,
render:h=>h(App)
});
之后借助router-link和router-view进行路由变化
<router-link to="/about">关于我们</router-link>
App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>