推荐Eslint插件
Eslint 作者是 微软 , 配置设置填写
"editor.codeActionsOnSave":{"source.fixAll":true,},
Prettier - Code formatter 插件
作者 : "Prettier"
在设置内的配置
{ "editor.codeActionsOnSave":{"source.fixAll":true,},
//导入文件时是否携带文件扩展名
"path-autocomplete.extensionOnImport": true,
//配置@的路径展示
"path-autocomplete.pathMappings":{
"@":"$(folder)/src"
},
"editor.tabSize": 2,
"editor.formatOnSave": true,
"prettier.configPath": "C:\\Users\\酷比\\.prettierrc",
"eslint.alwaysShowStatus": true,
"prettier.trailingComma": "none",
"prettier.semi": false,
//每行文字个数超出被迫转行
"prettier.printWidth": 300,
//使用单引号替换双引号
"prettier.singleQuote": true,
"prettier.arrowParens": "avoid",
//设置.vue文件中,HTML代码格式化插件
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.ignoreProjectWarning": true,
"vetur.format.defaultFormatterOptions": {
"prettier": {
"trailingComma":"none",
"semi":false,
"singleQuote":true,
"arrowParens":"avoid",
"printWidth":300
},
"js-beautify-html": {
"wrap_attributes":false
}
}
}
演示axios
安装过程中出现 npm ERR! code ERESOLVE 问题
在命令后添加 --legacy-peer-deps 解决
传统的axios的POST和GET方式不推荐,建议是axios挂载到Vue上
现在开始如果想在每个组件上用axios请求的话,可以先向mainjs内声明一个实例,通过原型对象的方式实现全局axios效果
import axios from 'axios' Vue.prototype.$http = axios
<script> export default { methods : { async getinfo(){ const {data:res} = await this.$http.get('http://www.liulongbin.top:3006/api/get') console.log(res) } } } </script>
$http为自定义名称
axios根路径整合方式
在main.js内添加,端口号之前都属于根路径
axios.defaults.baseURL = '请求根路径'
缺点:无法实现api接口复用
了解前端路由概念
快速前端路由有组件来帮助我们创建路由 ,以下这些内容后期直接创建即可,不需要手动配置
切换界面
首先在a标签的连接内声明几个哈希名称
component理解为切换属性绑定动态is后将在data内声明的名称传入,在created内利用onhashchange监听
<template> <div class="app-container"> <h1>App 根组件</h1> <a href="#/home">首页</a> <a href="#/movie">电影</a> <a href="#/about">关于</a> <hr /> <component :is="comName"></component> </div> </template> <script> // 导入组件 import Home from '@/components/Home.vue' import Movie from '@/components/Movie.vue' import About from '@/components/About.vue' export default { data (){ return { //在动态组件展示的名字必须是字符串 comName : '' } }, //只要APP组件创建就立即监听onhashchange created(){ window.onhashchange = () => { switch (location.hash) { case '#/home' : this.comName = 'Home' break case '#/movie' : this.comName = 'Movie' break case '#/about' : this.comName = 'About' break } } }, name: 'App', // 注册组件 components: { Home, Movie, About } } </script> <style lang="less" scoped> .app-container { background-color: #efefef; overflow: hidden; margin: 10px; padding: 15px; > a { margin-right: 10px; } } </style>
vue-router的基本使用 (3.5.2 -S)
1安装 vue-router 包
npm i vue-router@3.5.2 -S
2创建路由模块
在src目录下新建router/index.js路由模块
import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter) const router = new VueRouter() export default router
3导入挂载路由模块(在main中)
import Vue from 'vue' import App from './App2.vue' //引入router import router from './router' // 导入 bootstrap 样式 import 'bootstrap/dist/css/bootstrap.min.css' // 全局样式 import '@/assets/global.css' Vue.config.productionTip = false new Vue({ render: h => h(App), //在vue项目中把路由用起来必须把路由实例进行挂载 router : router }).$mount('#app')
4声明路由链接和占位符
在 APP.VUE的a标签标注哈希地址,再用 router-view当作占位符
<template> <div class="app-container"> <h1>App2 组件</h1> <a href="#/home">首页</a> <a href="#/movie">电影</a> <a href="#/about">关于</a> <hr /> <!-- 在项目配置了vue-router就能使用,作用单纯占位符 --> <router-view></router-view> </div> </template>
router内的index,js
首先引入三个界面,其次在实例内用routes数组建立连接
import Vue from "vue"; import VueRouter from "vue-router"; import Home from '../components/Home.vue' import Movie from '../components/Movie.vue' import About from '../components/About.vue' Vue.use(VueRouter) const router = new VueRouter({ //router是一个数组,定义hash地址和组件之间的关系 //路由规则 routes : [ {path : '/home', component:Home}, {path : '/movie', component:Movie}, {path : '/About', component:About} ] }) export default router
使用router-link替代a链接
实际router-link在源代码中也会被替代成a标签
<template>
<div class="app-container">
<h1>App2 组件</h1>
<!-- 安装配置vue-router后可以用router-link替代a链接(尽量用),省略# -->
<router-link to="/home">首页</router-link>
<router-link to="/movie">电影</router-link>
<router-link to="/about">关于</router-link>
<hr />
<!-- 在项目配置了vue-router就能使用,作用单纯占位符 -->
<router-view></router-view>
</div>
</template>
路由重定向
用户访问地址A,强制跳转到地址C ,展示特定组件页面(redirect)
在router的index.js内声明 redirect (省的用户进入界面显示空白)
import Vue from "vue"; import VueRouter from "vue-router"; import Home from '../components/Home.vue' import Movie from '../components/Movie.vue' import About from '../components/About.vue' Vue.use(VueRouter) const router = new VueRouter({ //router是一个数组,定义hash地址和组件之间的关系 routes : [ //重定向路由规则 {path : '/', redirect :'/home'}, {path : '/home', component:Home}, {path : '/movie', component:Movie}, {path : '/About', component:About} ] }) export default router