Vue快速搭建项目框架

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>