一、常规项目配置安装：

1、安装vue-router路由：

cmd下在当前项目目录下执行 ：

npm install vue-router --save-dev

如果因为依赖安装失败，则执行 ：

npm install --legacy-peer-deps vue-router --save-dev

如果后续出现版本冲突问题，可以降低版本。

2、安装vue-axios:

cmd下在当前项目目录下执行：

npm install --save axios vue-axios

3、安装element-ui：

cmd下在当前项目目录下执行：

npm i element-ui -S

4、安装sass加载器:

cmd下在当前项目目录下执行：

cnpm install sass-loader node-sass --save-dev

切记版本不要选太高，可以指定版本安装，亲测4.0.0最稳定。

5、将所有安装部署到项目中：

cmd下在当前项目目录下执行：

npm install

6、启动测试：

cmd下在当前项目目录下执行：

npm run dev

二、项目实例：

1、项目结构：

说明：

• assets：用于存放资源文件
• components：用于存放Vue功能组件
• views：用于存放Vue视图组件
• router：用于存放vue-router配置

 2、创建组件：

• 在views目录下创建Login.vue组件:（此为element-ui实例，可以自己去官网找模板）

  <template>
    <div>
      <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
        <h3 class="login-title">欢迎登录</h3>
        <el-form-item label="账号" prop="username">
          <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="onsubmit('loginForm')">登录</el-button>
        </el-form-item>
      </el-form>
  
      <el-dialog title="温馨提示" :visible.sync="dialogVisiable" width="30%" :before-close="handleClose">
        <span>请输入账号和密码</span>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">确定</el-button>
          </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
      export default {
          name: "Login",
        data(){
            return{
              form:{
                username:'',
                password:''
              },
              //表单验证，需要在 el-form-item 元素中增加prop属性
              rules:{
                username:[
                  {required:true,message:"账号不可为空",trigger:"blur"}
                ],
                password:[
                  {required:true,message:"密码不可为空",tigger:"blur"}
                ]
              },
  
              //对话框显示和隐藏
              dialogVisible:false
            }
        },
        methods:{
            onSubmit(formName){
              //为表单绑定验证功能
              this.$refs[formName].validate((valid)=>{
                if(valid){
                  //使用vue-router路由到指定界面，该方式称为编程式导航
                  this.$router.push('/main');
                }else{
                  this.dialogVisible=true;
                  return false;
                }
              });
            }
        }
      }
  </script>
  
  <style lang="scss" scoped>
    .login-box{
      border:1px solid #DCDFE6;
      width: 350px;
      margin:180px auto;
      padding: 35px 35px 15px 35px;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      box-shadow: 0 0 25px #909399;
    }
    .login-title{
      text-align:center;
      margin: 0 auto 40px auto;
      color: #303133;
    }
  </style>
  

• 在views目录下创建Main.vue组件:

  <template>
  <div>首页</div>
  </template>
  <script>
      export default {
          name:"Main"
      }
  </script>
  <style scoped>
  </style>
  

•  在router目录下创建一个名为index.js的vue-route路由配置文件:

  //导入vue
  import Vue from 'vue';
  import VueRouter from 'vue-router';
  //使用
  Vue.use(VueRouter);
  //导出
  export default new VueRouter({
  })
  

          vue-router为之前安装的模块，这里进行导入，然后还要安装路由Vue.use()即可使用，还需要暴露路由，让其他组件也能使用，则要最后那段。

          将我们之前写两个组件导入，并设置其访问路径与组件。

  //导入vue
  import Vue from 'vue';
  import VueRouter from 'vue-router';
  //导入组件
  import Main from "../views/Main";
  import Login from "../views/Login";
  //使用
  Vue.use(VueRouter);
  //导出
  export default new VueRouter({
      routes: [
      {
        //登录页
        path: '/main',
        component: Main
      },
      //首页
      {
        path: '/login',
        component: Login
      },
    ]
  })
  

•  在main.js中配置路由:

  import Vue from 'vue'
  import App from './App'
  import router from "./router"
  
  import ElementUI from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'
  
  Vue.config.productionTip = false
  
  Vue.use(router)
  Vue.use(ElementUI)
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    render:h=>h(App)
  })
  
  

  导入element-ui使其生效。

•  编写APP.vue:

  <template>
    <div id="app">
      <router-view></router-view>
    </div>
  </template>
  
  <script>
      export default {
          name: 'App',
  
      }
  </script>
  

  app组件中<router-view>里来显示子组件的视图。

• 测试： 

   在控制台当前项目下输入:

npm run dev

 结果测试成功：

•  在views目录下创建一个目录user，并新建两个组件，一个为List.vue，一个为Profile.vue:

  <template>
    <h1>用户列表</h1>
  </template>
  
  <script>
      export default {
          name: "UserList"
      }
  </script>
  
  <style scoped>
  
  </style>

  <template>
    <div>
      <h1>个人信息</h1>
    </div>
  </template>
  
  <script>
      export default {
          name: "UserProfile",
      }
  </script>
  
  <style scoped>
  
  </style>

• 在views目录下创建一个组件名为Main.vue与NotFound.vue，这个组件采用了element-ui的模板结构: 

  <template>
    <div>
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                  <!--插入的地方-->
                  <router-link to="/user/profile">个人信息</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                  <!--插入的地方-->
                  <router-link to="/user/list">用户列表</router-link>
                </el-menu-item>
                <el-menu-item index="1-3">
                  <!--插入的地方-->
                  <router-link to="/goHome">回到首页</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
              <el-menu-item-group>
                <el-menu-item index="2-1">分类管理</el-menu-item>
                <el-menu-item index="2-2">内容列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title"><i class="el-icon-caret-right"></i>系统管理</template>
              <el-menu-item-group>
                <el-menu-item index="3-1">分类管理</el-menu-item>
                <el-menu-item index="3-2">内容列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
  
        <el-container>
          <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-header>
          <el-main>
            <!--在这里展示视图-->
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  <script>
    export default {
      name: "Main2"
    }
  </script>
  <style scoped lang="scss">
    .el-header {
      background-color: #B3C0D1;
      color: #333;
      line-height: 60px;
    }
    .el-aside {
      color: #333;
    }
  </style>
  
  

  <template>
      <h1>404</h1>
  </template>
  
  <script>
      export default {
          name: "NotFound"
      }
  </script>
  
  <style scoped>
  
  </style>
  

• 在index.js中导入这几个组件路由： 

  import Vue from 'vue'
  import VueRouter from 'vue-router'
  import Content from "../components/Content";
  import Main1 from "../components/Main";
  import Login from "../views/Login"
  import Main2 from "../views/Main";
  import UserList from "../views/user/List";
  import UserProfile from "../views/user/Profile";
  import NotFound from "../views/NotFound";
  
  //安装路由
  Vue.use(VueRouter)
  
  //配置导出路由
  export default new VueRouter({
    //让地址栏不出现#号
    mode: 'history',
    routes: [
      {
        //路由路径 相当于@RequestMapping
        path: '/content',
        name: 'Content',
        //跳转的组件
        component: Content
      },
      {
        //路由路径
        path: '/main1',
        name: 'Main',
        //跳转的组件
        component: Main1
      },
      {
        //路由路径
        path: '/login',
        name: 'Login',
        //跳转的组件
        component: Login,
      },
      {
        path: '/main2/:username',
        name: 'Main2',
        component: Main2,
        //子组件（嵌套组件）
        children: [
          {
            path: '/user/profile/:id',
            component: UserProfile
          },
          {
            path: '/user/list',
            component: UserList
          }
        ]
      },
      {
        path : '/goHome',
        //重定向
        redirect: '/main2'
      },
      {
        path: '*',
        component: NotFound
      }
    ]
  })
  

•  进行测试：

 

 其中还有参数传递与钩子函数，实现起来比较简单 ，这里便不一一介绍了，vue基础快速学习结束，之后结合项目去完善更多的高级vue使用，对于后端开发人员来说，学到入门了解即可，也可深入学习慢慢向全栈工程师发展。