vue项目创建,lint,--fix,打包项目发给同事,反向代理解决axios跨域访问问题@诗书画唱
目录：
知识
例子1：创建vue项目，解决空格问题，打包项目发给同事的方法
注释掉.eslintrc.js中的'standard'解决空格问题（如果你不想注释掉'standard'，那么就用npm run lint的方式自动修复空格等的不规范问题等等）
用npm run build打包，dist文件夹下会生成文件
package.json中添加--fix
例子2：在src目录下的App.vue中使用在components目录下的自定义的My.vue组件（功能是：依次点击1，2，3......次“添加选项”按钮后，下拉框会依次增加1，2，3......的内容的option选项。提示：当npm run dev后，访问的路径默认呈现的是App.vue中调用的组件）
My.vue
App.vue
用d：在cmd中切换到D盘后用cd命令切换文件夹等等
Microsoft Windows [版本 10.0.18363.1256]
(c) 2019 Microsoft Corporation。保留所有权利。
C:\Windows\system32>d:
D:\>cd D:\vsCodeProject\vue_project_houtai
D:\vsCodeProject\vue_project_houtai>node index
服务器完毕，访问地址http://127.0.0.1:9001/
例子3：使用反向代理解决axios的跨域访问问题
index.js
You.vue
index.js
npm install --save axios
例子4：实现导航条
Tabbar.vue
index.js
Comingsoon.vue
Nowplaying.vue
Center.vue
Cinema.vue
Detail.vue
Film.vue
App.vue
standard
知识
"1、npm run lint命令:
如果config/index.js文件中的useEslint被设置为true,那么在编译时会报eslint错误
修改package.json文件中的""lint""为 ""eslint --fix --ext .js,.vue src"",
运行npm run lint，会自动修复所有的eslint错误
那么再执行npm run dev时就不会报错了"
"2、npm run build打包命令：
会自动生成dist文件，将dist文件夹中的内容部署到后台程序中"
"3、配置反向代理
修改config/index.js文件中的proxyTable属性
pathRewrite的作用"
4、创建导航栏
5、配置欢迎页面
6、高亮显示
7、二级路由配置
8、去掉路径的#
9、路由守卫
10、传参
项目中的跨域访问问题：
1、cors
2、jsonp
3、反向代理
例子1：创建vue项目，解决空格问题，打包项目发给同事的方法
npm install --global vue-cli
vue init webpack my_vue_project1
全部直接按回车也行（有些不用的，可以写n后按回车）：
打开生成的项目
http://localhost:8080/#/
注释掉.eslintrc.js中的'standard'解决空格问题（如果你不想注释掉'standard'，那么就用npm run lint的方式自动修复空格等的不规范问题等等）
package.json中添加--fix
用npm run lint可以自动修复一些空格等的报错，让其代码等等变得更规范
用npm run build打包，dist文件夹下会生成文件
被打包的文件基本都是变成一行的代码的：
如果写好组件等等后打包好后，复制打包的文件到下面的文件夹中的public文件夹下（给同事看的是打包后的文件）
http://127.0.0.1:9001/#/
standard
例子2：在src目录下的App.vue中使用在components目录下的自定义的My.vue组件（功能是：依次点击1，2，3......次“添加选项”按钮后，下拉框会依次增加1，2，3......的内容的option选项。提示：当npm run dev后，访问的路径默认呈现的是App.vue中调用的组件）
My.vue
<template>
<div>
<input type="button" value="添加选项" @click="add"/>
<select>
<option v-for="opt in opts" :key="opt">{{opt}}</option>
</select>
</div>
</template>
<script>
export default {
data () {
return {
opts: [],
num: 1
}
},
methods: {
add () {
this.opts.push(this.num++)
}
}
}
</script>
<style>
</style>
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- 自己加的代码 START -->
<my/>
<!-- 自己加的代码 END -->
<router-view/>
</div>
</template>
<script>
//自己加的代码 START
// import tabbar from '@/components/Tabbar'
import my from '@/components/my'
//自己加的代码 END
export default {
name: 'App',
//自己加的代码 START
components: {
// tabbar
my
}
//自己加的代码 END
}
</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运行后：
http://localhost:8081/#/
例子3：在例子2的基础上，用npm run build命令打包（打包的CSS和单页面的单个html是被混淆后的）
这里我框起来的部分表示，一访问下面的访问地址就会自动访问当前目录下的public目录下的index.html文件，所以会把打包好的文件复制，放到后台目录的public目录下
npm run build
自己创建的后台：
把打包的文件放到后台的public文件夹下
用d：在cmd中切换到D盘后用cd命令切换文件夹等等
Microsoft Windows [版本 10.0.18363.1256]
(c) 2019 Microsoft Corporation。保留所有权利。
C:\Windows\system32>d:
D:\>cd D:\vsCodeProject\vue_project_houtai
D:\vsCodeProject\vue_project_houtai>node index
服务器完毕，访问地址http://127.0.0.1:9001/
index.js
//routes/index.js
module.exports = function(app){
//http://127.0.0.1:9001/query
app.get('/query',function(req,res){
res.setHeader("content-type", "application/json");
res.end('{"content":"hello"}');
});
//http://127.0.0.1:9001/add
app.get('/add',function(req,res){
res.setHeader("content-type", "application/json");
res.end('["bar","foo"]');
});
}
index.js
//index.js
//引入express模块
let express = require('express');
//获取express框架配置对象app
let app = express();
app.use(express.static(__dirname + '/public'));
//导入路由配置
let routes = require('./routes/index')(app);
//设置访问的端口号是9001
app.listen(9001);
//启动项目以后，在浏览器地址栏输入http://127.0.0.1:9001以后，
//就会跳转到__dirname + '/public'目录下的index.html页面去
console.log('服务器完毕，访问地址http://127.0.0.1:9001/');
例子3：使用反向代理解决axios的跨域访问问题
npm install --save axios
前台，后台服务器都开启：
http://localhost:8080/#/you
index.js
//routes/index.js
module.exports = function(app){
//http://127.0.0.1:9001/query
app.get('/query',function(req,res){
res.setHeader("content-type", "application/json");
res.end('{"content":"hello"}');
});
//http://127.0.0.1:9001/add
app.get('/add',function(req,res){
res.setHeader("content-type", "application/json");
res.end('["bar","foo"]');
});
}
index.js
//自己加的关于反向代理的部分 START
'/axs': {
target: 'http://127.0.0.1:9001',
changeOrigin: true,
pathRewrite: {//请求路径中的/axs仅用来匹配代理的target是哪个
'^/axs': ''
}
}
//自己加的关于反向代理的部分 END
You.vue
<template>
<div>
<h1>{{msg}}</h1>
<input type="button" value="获取数据" @click="loadData" />
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
msg: ''
}
},
methods: {
loadData () {
// 因为这个url路径以axs开头，所以ip地址指向与/axs匹配的target
// ^/axs表示最后请求的路径中不包含/axs
/* 所以最后的请求路径是http://127.0.0.1:9001/query
，http://127.0.0.1:9001和/axs等价，因为 config目录的index.js文件进行了配置
： proxyTable: {
//自己加的关于反向代理的部分 START
'/axs': {
target: 'http://127.0.0.1:9001',
changeOrigin: true,
pathRewrite: {//请求路径中的/axs仅用来匹配代理的target是哪个
'^/axs': ''
}
}
//自己加的关于反向代理的部分 END
},
*/
axios.get('/axs/query')
.then(res => {
this.msg = res.data.content
})
}
}
}
</script>
<style>
</style>
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//自己加的代码 START
// import ZuJian1 from '@/components/ZuJian1'
import My from '@/components/My'
import You from '@/components/You'
//自己加的代码 END
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
// // http://localhost:8080/#/ZuJian1
// {
// path: '/ZuJian1',
// name: 'ZuJian1',
// component: ZuJian1
// }
// http://localhost:8080/#/my
{
path: '/my',
name: 'My',
component: My
},
// http://localhost:8080/#/you
{
path: '/you',
name: 'You',
component: You
},
]
})
例子4：实现导航条
Tabbar
tabBar 指底部的 导航配置属性
Tabbar.vue
<template>
<nav>
<ul>
<!-- <li>
<a href="#/film">电影</a>
</li>
<li>
<a href="#/cinema">剧院</a>
</li>
<li>
<a href="#/center">个人中心</a>
</li> -->
<router-link to="/film" tag="li" active-class="hl">电影</router-link>
<router-link to="/cinema" tag="li" active-class="hl">剧院</router-link>
<router-link to="/center" tag="li" active-class="hl">个人中心</router-link>
</ul>
</nav>
</template>
<script>
export default {
}
</script>
<style>
.hl {
color: red;
}
</style>
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//自己加的代码 START
// import ZuJian1 from '@/components/ZuJian1'
import My from '@/components/My'
import You from '@/components/You'
import Film from '@/views/Film'
import Cinema from '@/views/Cinema'
import Center from '@/views/Center'
import Detail from '@/views/Detail'
import Nowplaying from '@/views/Film/Nowplaying'
import Comingsoon from '@/views/Film/Comingsoon'
//自己加的代码 END
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
// // http://localhost:8080/#/ZuJian1
// {
// path: '/ZuJian1',
// name: 'ZuJian1',
// component: ZuJian1
// }
// http://localhost:8080/#/my
{
path: '/my',
name: 'My',
component: My
},
// http://localhost:8080/#/you
{
path: '/you',
name: 'You',
component: You
},
{
path: '/film',
component: Film,
children: [
{// 也可以写成path: 'nowplaying'
path: '/film/nowplaying',
component: Nowplaying
},
{// 也可以写成path: 'comingsoon'
path: '/film/comingsoon',
component: Comingsoon
},
{// 设置二级路由为空时访问哪个组件
path: '',
redirect: '/film/nowplaying'
}
]
}, {
path: '/cinema',
component: Cinema
}, {
path: '/center',
component: Center
}, {
path: '/detail',
component: Detail
}, {// 输入不匹配的路径是统一跳转到/film对应的组件
path: '*',
redirect: '/film'
}
]
})
Comingsoon.vue
<template>
<h1>即将上映</h1>
</template>
<script>
export default {
}
</script>
<style>
</style>
Nowplaying.vue
<template>
<div>
<h1>正在热映</h1>
<ul>
<li v-for="data in dataList" :key="data" @click="viewDetail(data)">{{data}}</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
dataList: ['唐人街探案1', '悬崖之上', '唐伯虎点秋香']
}
},
methods: {
viewDetail (name) {
// 显示Detail组件
this.$router.push('/detail')
}
}
}
</script>
<style>
</style>
Center.vue
<template>
<h1>个人中心</h1>
</template>
<script>
export default {
}
</script>
<style>
</style>
Cinema.vue
<template>
<h1>影院</h1>
</template>
<script>
export default {
}
</script>
<style>
</style>
Detail.vue
<template>
<h1>电影详情</h1>
</template>
<script>
export default {
}
</script>
<style>
</style>
Film.vue
<template>
<div>
<div>电影LOGO</div>
<div>电影Tab</div>
<router-view/>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- 自己加的代码 START -->
<tabbar/>
<!-- <My/> -->
<!-- 自己加的代码 END -->
<router-view/>
</div>
</template>
<script>
//自己加的代码 START
import tabbar from '@/components/Tabbar'
// import my from '@/components/My'
//自己加的代码 END
export default {
name: 'App',
//自己加的代码 START
components: {
tabbar
// My
}
//自己加的代码 END
}
</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>
