初“识”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.新建项目
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": "今天你喝可乐了吗 <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.运行
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