环境搭建
- node.js安装
下载对应的版本安装
安装成功后使用以下命令测试即可
- 安装node.js淘宝镜像加速器
npm install cnpm -g
安装目录为C:\Users\Lenovo\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
- 安装vue-cli
cnmp install vue-cli -g
可以使用vue list测试是否安装成功
创建vue-cli项目
- 管理员权限打开cmd,切换到自定义的项目路径,执行如下命令
vue init webpack myvue
2. 创建完成后,执行以下操作
cd myvue
npm install
npm run dev
- 执行完毕后会出现界面,即为安装成功
打开该网址
使用webpack
- 安装
npm install webpack
npm install webpack-cli
- 安装完成后,创建一个空文件夹,使用idea打开
- 创建一个modules文件夹
- 新建两个js文件
hello.js
// 暴露一个 Hello 方法
exports.Hello = function() {
document.writeln("<h1>Hello webpack!</h1>>")
}
main.js
// 引入hello.js
let hello = require("./hello")
hello.Hello()
- 更目录下创建一个webpack.config.js文件
webpack.config.js
module.exports = {
// 入口文件
entry: "./modules/main.js",
output: {
// 输出目录
filename:"./js/bundle.js"
}
};
-
打开终端输入webpack命令即可打包
出现错误使用管理员权限打开idea,或者使用cmd管理员模式 -
创建一个index.html,引入导出的bundle.js文件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="dist/js/bundle.js"></script>
</head>
<body>
</body>
</html>
8.打开index.html,真神奇!
vue-router
- 下载
npm install vue-router --save-dev
- 打开vue-cli项目
- 引用方式
import VueRouter from "vue-router";
Vue.use(VueRouter)
- 创建两个组件
content.vue
<template>
<h1>内容页</h1>
</template>
<script>
export default {
name: "Content"
}
</script>
<style scoped>
</style>
Main.vue
<template>
<h1>主页面</h1>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
- 创建一个路由配置文件
index.js
import Content from "../components/Content";
import Main from "../components/Main";
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter)
export default new VueRouter({
routes: [
{
path: "/main", // 路径
component: Main, // 组件
name: "main", // 名称
},
{
path: "/content",
component: Content,
name: "content"
}
]
})
- 在main.js中引入路由配置文件
main.js
import Vue from 'vue'
import App from './App'
import router from "./router"
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router, // 路由
components: { App },
template: '<App/>'
})
- 在App.vue中配置链接
<template>
<div id="app">
<h1>App</h1>
<router-link to="/main">主页</router-link>
<router-link to="/content">内容页</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</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>
- 启动
npm run dev
vue+elementUI
- 创建一个vue-cli项目hello-vue
- 创建好后进入工程目录,安装如下依赖
cd hello-vue
//vue-router
npm install vue-router -save-dev
// element-ui
npm i element-ui -S
npm install
//sass
cnpm install sass-loader node-sass -save-dev
- 完成后启动测试
npm run dev
- 测试无误后,idea打开项目,新建两个Vue文件
login.vue
代码从elementUI拷贝
<template>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="ruleForm.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: "Login",
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('年龄不能为空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
}
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
ruleForm: {
pass: '',
checkPass: '',
age: ''
},
rules: {
pass: [
{validator: validatePass, trigger: 'blur'}
],
checkPass: [
{validator: validatePass2, trigger: 'blur'}
],
age: [
{validator: checkAge, trigger: 'blur'}
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style scoped>
</style>
mian.vue
<template>
<h1>main页面</h1>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
- 新建一个路由配置文件
配置好创建的两个vue组件
import Vue from "vue";
import VueRouter from "vue-router";
import Login from "../view/Login";
import Main from "../view/Main";
Vue.use(VueRouter)
export default new VueRouter({
routes: [
{
path: '/login',
component: Login,
},
{
path: "/main",
component:Main
}
]
})
- 在mian.js中
导入elementUI,导入路由配置
import Vue from 'vue'
import App from './App'
import router from "./router"
//elementUI
import ElementUI from 'element-ui';
//element-ui的css
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})
- App中如下配置
<template>
<div id="app">
<h1>app</h1>
<router-link to="/login">login</router-link>
<router-link to="/main">main</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
</style>
- npm run dev
路由嵌套
定义两个用户组件
List.vue
<template>
<h1>用户列表页</h1>
</template>
<script>
export default {
name: "UserList"
}
</script>
<style scoped>
</style>
Profile.vue
<template>
<h1>个人信息页</h1>
</template>
<script>
export default {
name: "UserProfile"
}
</script>
<style scoped>
</style>
将其添加在main组件的路由中
在chilren中定义子路由
和在routes中定义一样
index.js
{
path: "/main",
component:Main,
children:[
{path: "/user/profile", component: UserProfile},
{path: "/user/list", component: UserList}
]
}
定义在Main组件中,那么就在Main组件中使用子路由
Main.vue
<router-link to="/user/list">用户列表</router-link>
<router-link to="/user/profile">用户详情</router-link>
参数传递
现在要在路由中接收传递参数,并接收
首先将route-link改为如下形式
name:组件名称
params:需要传递的参数
to需要用v-bind绑定
<router-link :to="{name:'UserList', params:{id:1}}">用户列表</router-link>
在路由配置中接收参数
使用 :id 来接收
name就是route-link中的name
{path: "/user/list/:id", component: UserList, name:"UserList"}
使用接收的参数
<h2>{{$route.params.id}}</h2>
使用props接收
<router-link :to="{name:'UserList', params:{id:1}}">用户列表</router-link>
在路由配置中加上
props:true
{path: "/user/list/:id", component: UserList, name:"UserList", props:true}
在组件中添加props: [“id”]
<script>
export default {
props: ["id"],
name: "UserList"
}
</script>
取出
<h2>{{id}}</h2>
重定向
{
path:'/toMain',
redirect: "/main",
}