初“识”Vue路由

今天上课被老师抽到写vue.js的作业，闲暇之余写了个文档记录下自己踩到的坑。（大佬看到错误请多多指教！）

1.新建项目

2.安装vue和vue-router

3.安装webpack

4.安装vue-loader和vue-template-compiler

5.安装css-loader和style-loader

6.安装css预处理器

这里好像出了点问题后面会提到。

7.安装MUI，file-loader和url-loader

8.修改webpack.config.js文件

8.编写代码部分

目录结构：

8.1 main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import app from './App'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import router from './router.js'
import './lib/mui/css/mui.css'
// Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: c => c (app),
  router
  // components: { App },
  // template: '<App/>'
})

8.2 router.js

import VueRouter from 'vue-router'
import Login from './components/Login'
import Register from './components/Register'
var router = new VueRouter({
  routes : [
    {path: '/',redirect: '/login' },
    {path: "/login", component: Login },
    {path: "/register", component: Register }
  ]
})
export  default router

8.3 App.vue

<template>
  <div id="app">
    <div class="login-container">
      <router-link to="/login" tag="span">登录</router-link>
      <router-link to="/register" tag="span">注册</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<!--<script>-->
<!--export default {-->
<!--  name: 'App'-->
<!--}-->
<!--</script>-->

<style lang="scss" scoped>
  .login-container{
    display: flex;
    justify-content: center;
    padding-top: 10px;
    span {
      padding: 5px 20px;
      border-radius: 5px;
      font-size: 16px;
    }
  }
  /*#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>

8.4 components\Login.vue

<template>
  <div class="login">
    <div class="content">
      <form class="mui-input-group login-form">
        <div class="mui-input-row">
          <label>账号</label>
          <input type="text" class="mui-input-clear mui-input" placeholder="请输入账号" >
        </div>
        <div class="mui-input-row">
          <label>密码</label>
          <input type="password" class="mui-input-clear mui-input" placeholder="请输入密码" >
        </div>
      </form>
      <div class="mui-content-padded">
        <button type="button" class="mui-btn mui-btn-block mui-btn-primary">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data (){
      return{}
    }
  }
</script>

<style scoped>
  .login-form { margin: 30px 0; background-color: transparent;}
  .mui-input-group .mui-input-row {margin-bottom: 10px;background: #fff;}
  .mui-btn-block {padding: 10px 0}
</style>

8.5components\Register.vue

<template>
  <div class="register">
    <div class="content">
      <form class="mui-input-group login-form">
        <div class="mui-input-row">
          <label>账号</label>
          <input type="text" class="mui-input-clear mui-input" placeholder="请输入账号" >
        </div>
        <div class="mui-input-row">
          <label>密码</label>
          <input type="password" class="mui-input-clear mui-input" placeholder="请输入密码" >
        </div>
        <div class="mui-input-row">
          <label>密码确认</label>
          <input type="password" class="mui-input-clear mui-input" placeholder="请确认密码" >
        </div>
        <div class="mui-input-row">
          <label>邮箱</label>
          <input type="password" class="mui-input-clear mui-input" placeholder="请输入邮箱" >
        </div>
      </form>
      <div class="mui-content-padded">
        <button type="button" class="mui-btn mui-btn-block mui-btn-primary">注册</button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data (){
      return{

      }
    }
  }
</script>
<style scoped>
  .register-form { margin: 30px 0; background-color: transparent;}
  .mui-input-group .mui-input-row {margin-bottom: 10px;background: #fff;}
  .mui-btn-block {padding: 10px 0}
</style>

8.6 package.json

{
  "name": "chapter5",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "今天你喝可乐了吗 <[e-mail]>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "node-sass": "^4.12.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^3.2.1",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "sass-loader": "^7.2.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "style-loader": "^1.0.2",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^12.1.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

9.运行

10.运行时出现的问题

1）路径错误

呜呜呜别骂了~

把lib包放到src目录下，出现下面错误。

解决措施：

然后出现下面的错误，查了百度是版本之间有冲突

所以我重新安装了"vue": “^2.5.2”,“vue-router”: “^3.0.1”，“webpack-dev-server”: “^2.9.1”,版本不冲突然后运行成功。可以删了node_modules再下，不过在package.json里改应该更快一点。

2）没有安装node-sass

我选择安装最新版本的

然后出现下面这个问题

在package.json里面修改版本变成4.12.0版本就可以运行了。

本文地址：https://blog.csdn.net/weixin_46531153/article/details/111876873