前言
近来学了一下vue,用脚手架打了个项目,简单记录一下
官方文档:https://cli.vuejs.org/zh/guide/
安装环境
安装最新版本的vue-cli,我一开始安装的是旧版本的,出现了很多其他的问题,于是我就直接卸了旧版本装新版本了,安装可以用npm也可以用yarn,因为我都是用npm,所以下面也只写npm
卸载旧版本
1
npm uninstall vue-cli -g
安装新版本
1
npm install -g @vue/cli
检查版本
创建项目
可以通过命令行创建
也可以通过phpstorm/webstorm创建
在mac下有可能会遇到各种Error: EACCES: permission denied
权限问题
这里给出了解决办法 https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally
我用的是以下这种方法
建议直接在.bash_profile
中修改,因为修改.profile
的话,后面我用npm安装express的时候,会出现-bash: express: command not found
的问题,直接修改.bash_profile
可以解决这个问题
这里可以设置npm的全局安装目录的权限。打开终端,输入如下命令:
1 2
sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share} sudo chmod -R 777 /usr/local/lib/node_modules
修改.npm目录的权限
1
sudo chown -R $(whoami) ~/.npm
运行项目
1 2 3 4 5
Successfully created project test. Get started with the following commands: $ cd test $ npm run serve
看到如下即启动成功
安装vue-router
使用图形化界面安装
安装成功后可以在项目文件夹看到多一个router的文件夹
目录结构
要修改的主要就是src目录
assets
主要存放静态文件,比如img
components
功能级组件,可被装在views里面
router
Index.js配置路由
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
const routes = [ { path: '/' , //访问路径 name: 'home' , //路由名称 component: Home //路由对应的组件 }, { path: '/about' , name: 'about' , // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import (/* webpackChunkName: "about" */ '../views/About.vue' ) } ]
views
页面级组件
组件
创建组件
使用组件
要使用组件,就一定要先导入并定义,不然会报错
查看结果
传递数据
父组件向子组件传递
若只传递一个数据
About.vue,绑定一个动态数据
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
<template> <div class="about"> <h1>This is an about page</h1> <!-- 传递数据--> <get-data v-bind:name="name"></get-data> </div> </template> <script> import getData from "@/components/getData"; export default { data: function(){ return{ // 一个数据 name: "Glarcy", // 多个数据 userData:{ name: "Glarcy", intro: "弟弟来了" } } }, components: { getData } } </script>
getData.vue,子组件通过设置props属性获取值
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<template> <div>Hello,{{name}}</div> </template> <script> export default { name: "getData", props: ['name'] } </script> <style scoped> </style>
若需要传递多个数据,可以这么绑定
1
<get-data v-bind="userData"></get-data>
getData.vue
1 2 3 4 5 6 7 8 9 10
<template> <div>{{name}}:{{intro}}</div> </template> <script> export default { name: "getData", props: ['name','intro'] } </script>
子组件向父组件传递
getData.vue,子组件可以使用 $emit 触发父组件的自定义事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
<template> <div> <p>Hello,{{name}}</p> <p>intro:{{intro}}</p> <button @click="hidden">hidden</button> </div> </template> <script> export default { name: "getData", props: ['name','intro'], methods:{ hidden: function () { let data = {'show':false}; this.$emit('hide',data); }, } } </script>
About.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
<template> <div class="about"> <h1>This is an about page</h1> <!-- 传递数据--> <get-data @hide="hide" v-if="show" v-bind="userData"></get-data> </div> </template> <script> import getData from "@/components/getData"; export default { data: function(){ return{ show: true, userData:{ name: "Glarcy", intro: "弟弟来了" } } }, components: { getData }, methods:{ hide: function (data) { this.show = data.show } } } </script>
数据交互
与后台交互获取数据,我使用的是axios库
官方文档:http://www.axios-js.com/zh-cn/docs/
安装
引入axios
在main.js中引用
1 2
import axios from 'axios' Vue.prototype.$axios = axios;
配置默认值
指定将被用在各个请求的配置默认值,更多参考官方文档
1 2 3 4
//请求地址 axios.defaults.baseURL = 'http://xxx.xxx.xxx.xxx' ; //请求数据类型 axios.defaults.headers.post['Content-Type' ] = 'application/x-www-form-urlencoded' ;
发送请求
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
methods: { get : function () { axios .get('/get.php?a=123' ) .then(function (res ) { window .console.log(res) }) .catch(function (err ) { window .console.log(err) }) }, post: function ( ) { let params = new URLSearchParams(); params.append('a' ,'123' ); axios .post('/post.php' ,params) .then(function (res ) { window .console.log(res) }) .catch(function (err ) { window .console.log(err) }) } },
但是会出现跨域问题
跨域问题
之前开发的时候有跨域问题都是找后台,这里通过配置devServer解决
修改默认请求地址
1
axios.defaults.baseURL = '/api';
新建vue.config.js
https://cli.vuejs.org/zh/config/#vue-config-js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
module .exports = { /* webpack-dev-server 相关配置 */ devServer: { /* 自动打开浏览器 */ open: true , /* 设置为0.0.0.0则所有的地址均能访问 */ host: '0.0.0.0' , /* 本地localhost端口 */ port: 8080 , /* 使用代理 */ proxy: { '/api' : { /* 目标代理服务器地址 */ target: 'http://xxx.xxx.xxx.xxx' , pathRewrite: {'^/api' : '' }, /* 允许跨域 */ changeOrigin: true , }, }, }, };
proxy的意思就是当我们请求/api/get.php
时,实际上是请求http://xxx.xxx.xxx.xxx/api/get.php
,如果不想/api
被传递,我们则需要重写路径,将/api
置为空,这样就不会有错了
原文始发于微信公众号(菜鸟小新):vue学习记录
评论