欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

初“识”Vue路由

程序员文章站 2022-06-26 17:57:15
今天上课被老师抽到写vue的作业,闲暇之余写了个文档记录下自己踩到的坑。(大佬看到错误请多多指教!)1.新建项目2.安装vue和vue-router3.安装webpack4.安装vue-loader和vue-template-compiler5.安装css-loader和style-loader6.安装css预处理器这里好像出了点问题后面会提到。7.安装MUI,file-loader和url-loader8.修改webpack.config.js文件8.编写代码部分目录...

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

1.新建项目初“识”Vue路由

2.安装vue和vue-router初“识”Vue路由

3.安装webpack

初“识”Vue路由

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

初“识”Vue路由

5.安装css-loader和style-loader

初“识”Vue路由

6.安装css预处理器

这里好像出了点问题后面会提到。
初“识”Vue路由

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

初“识”Vue路由
初“识”Vue路由

8.修改webpack.config.js文件

初“识”Vue路由
初“识”Vue路由

8.编写代码部分

目录结构:
初“识”Vue路由

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": "今天你喝可乐了吗 <627641822@qq.com>",
  "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.运行

初“识”Vue路由
初“识”Vue路由

10.运行时出现的问题

1)路径错误

呜呜呜别骂了~
初“识”Vue路由

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

初“识”Vue路由

初“识”Vue路由

解决措施:
初“识”Vue路由

然后出现下面的错误,查了百度是版本之间有冲突
初“识”Vue路由
所以我重新安装了"vue": “^2.5.2”,“vue-router”: “^3.0.1”,“webpack-dev-server”: “^2.9.1”,版本不冲突然后运行成功。可以删了node_modules再下,不过在package.json里改应该更快一点。

2)没有安装node-sass

初“识”Vue路由
我选择安装最新版本的初“识”Vue路由

然后出现下面这个问题
初“识”Vue路由
在package.json里面修改版本变成4.12.0版本就可以运行了。

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