一、初始化项目-环境搭建
1、当前开发环境
node.js -v v8.9.3
npm -v 6.1.0
yarn -v 1.7.0
Vue -v 2.5.2
全局安装vue-cli vue
2、新建文件夹，在文件下初始化项目
vue init webpack vue-elementui（项目名称）
同样一路回车如下
图片.png
这里取消了ESLint代码风格检查工具以及单元测试模块，当然也可以选择保留
依赖包管理工具选择了yarn（yarn可以缓存之前下载的模块，可以提高模块加载的速度）
不选择了vue-router模块，因为使用cdn引入
然后回车，下载以下模块
图片.png
结束之后如上图所示，cd进入项目，然后npm run dev，项目就可以跑起来了，在浏览器中输入localhost:8080即可打开项目
图片.png
可以把src分成2个大模块：Main 和Public
图片.png
page: 放置页面组件。通常是这里，引入通用模块组件，加入逻辑，形成完整的页面；
router: 放置路由设置文件，指定路由对应的页面；
store: 放置 vuex 需要的 state、mutations 等；
App.vue: 入口组件，pages 里的组件会被插入此组件中，此组件再插入 index.html 文件里，形成单页面应用；
main.js: 入口 js 文件，影响全局，作用是引入全局使用的库、公共的样式和方法、设置路由等。
二、项目搭建配置
上面只是简单的完成了项目的初始化，接下来将按照下面的步骤来完成项目的配置
1.相关三方插件的cdn引入（vuex、axios、element-ui、sass）
2.项目的基本配置文件配置
3.路由管理模块vue-router及菜单权限的配置
4.状态管理模块vuex的配置
5.请求模块axios的配置
1.相关三方插件的cdn引入（vuex、axios、element-ui、sass）
图片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.11.1/index.js"></script>
</body>
</html>
sass:
yarn add node-sass -D
yarn add sass-loader -D
yarn add style-loader -D
2.打开在bulid文件夹下的webpack.base.conf.js,加上配置（注意，变量名和之前import的名字对应）
图片.png
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'element-ui': 'ELEMENT',
'axios': 'axios'
},
// 跨域配置-config/index.js
图片.png
//代理设置
proxyTable: {
"/proxy": {
target: "http://192.168.3.12:8031", // 你接口的域名
secure: false,
changeOrigin: true,
pathRewrite: {
"^/proxy": ""
}
}
三、基本使用
1.src下建立page文件夹，并创建我们的第一个vue页面，Welcome.vue
图片.png
<template>
<div>
<!-- 测试 element ui 是否生效 -->
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
</div>
</template>
<script>
export default {
name: 'Welcome',
data () {
return {
}
}
}
</script>
2.修改路由router/index.js
图片.png
import Router from 'vue-router'
import Welcome from '@/page/Welcome'
export default new Router({
routes: [
{
path: '/',
name: 'welcome',
component: Welcome
}
]
})
四、页面路由跳转
https://router.vuejs.org/zh/guide/essentials/navigation.html
router/index.js 里注册的两个页面
图片.png
import Router from 'vue-router'
import Welcome from '@/page/Welcome'
import Home from '@/page/Home'
export default new Router({
routes: [
// 跳转页面 携带参数值
{
path: '/',
name: 'welcome',
component: Welcome
},
// 被跳转页面 接收参数值
{
path: '/home/:id', // 路由参数名
name: 'home',
component: Home
}
]
})
1.封装路由跳转方法，以便后续使用
图片.png
// 封装编程式的导航,以便全局使用
link (url, data = {}) {
router.push({path: url, data})
},
2.将封装的方法注册到main.js主文件中，并绑定到全局使用
图片.png
// 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 './Main/App'
import router from './Main/router'
import utils from './Public/utils'
// 将工具方法绑定到全局
Vue.prototype.$utils = utils
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
3.在跳转页面中实现点击按钮进行路由跳转
图片.png
<template>
<div>
<!-- 测试 element ui 是否生效 -->
<el-button @click="$utils.link('/home/'+1234)">去首页</el-button>
<el-button type="primary">主要按钮</el-button>
</div>
</template>
<script>
export default {
name: 'Welcome',
data () {
return {}
}
}
</script>
4.在被跳转页面中接收路由传的参数
通过this.$route.params+参数名
图片.png
<template>
<div>首页</div>
</template>
<script>
export default {
name: 'home',
data () {
return {
}
},
created () {
console.log(this.$route.params.id, '接到的id')
}
}
</script>
网友评论