想学习Vue的SPA应用,路由这一块是必不可少的。相信很多和我一样刚接触前端的朋友对于路由这玩意是很困惑的。所以在我学习并成功使用了
vue-router
后,将我的个人经验分享出来,希望可以让同样对路由不知所措的同学有所帮助。

在学习了之前的路由vue-router和状态管理vuex之后,就应该是网络交互了。就学习尤大推荐的axios了。刚好本人对网络请求这块除了会get、put、post和delete这四个方法之外知之甚少,刚好补全上。

下面总结一下在学习Vue的时候遇到的一些问题。

  • 本文demo的项目结构用的是最新的命令行工具创建的webpack项目模板
  • 本文知识点是基于Vue2.0和vue-route
    2的,更多内容请参考Vue.js官网和vue-router 2官方文档:

注意:Vue官方推荐的网络通信库不再是vue-resource了,推荐使用axios。

关于ESLint的介绍网上很多,这里就简单说些有用的。ESLint的作用是检查代码错误和统一代码风格的。由于每个人写代码的习惯都会有所不同,所以统一代码风格在团队协作中尤为重要。

可以使用npm直接安装插件

图片 1image.png

vue-cli在init初始化时会询问是否需要添加ESLint,确认之后在创建的项目中就会出现.eslintignore.eslintrc.js两个文件。.eslintignore类似Git的.gitignore用来忽略一些文件不使用ESLint检查。.eslintrc.js是ESLint配置文件,用来设置插件、自定义规则、解析器等配置。

npm install vue-router --save

npm:

.eslintrc.js

执行命令完成vue-router的安装,并在package.json中添加了vue-router的依赖。当我们在其他电脑上安装项目时只需要执行
npm install 即可完成安装。

$ npm install axios
// http://eslint.org/docs/user-guide/configuringmodule.exports = { root: true, parser: 'babel-eslint', parserOptions: { sourceType: 'module' }, env: { browser: true, }, // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style extends: 'standard', // required to lint *.vue files plugins: [ 'html' ], // add your custom rules here 'rules': { // allow paren-less arrow functions 'arrow-parens': 0, // allow async-await 'generator-star-spacing': 0, // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 }}

package.json

bower:

解析器:使用了babel-eslint,这个可以在package.json中找到,说明我们已经安装过该解析器了。环境配置:在浏览器中使用eslint。继承:该配置文件继承了standard规则,具体规则自己看文档,看不懂有中文版的。规则:对于三个自定义规则,我特地查了官方文档。

 "dependencies": { ... "vue-router": "^2.1.1" ... },
$ bower install axios
  • arrow-parems 允许箭头函数参数使用括号,具体操作请看文档
  • generator-star-spacing
    允许方法之间加星号,如function * generator() {}。文档在此。特地查了下,发现这是ES6提供的生成器函数,回头学习下。
  • no-debugger’
    允许在开发环境下使用debugger。这个比较简单,不过还是贴下文档便于查看。

如果是要安装在开发环境下,则使用以下命令行:

Using cdn:

注意:rules中每个配置项后面第一个值是eslint规则的错误等级

npm install vue-router --save-dev
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  • “off” 或 0 – 关闭这条规则
  • “warn” 或 1 – 违反规则会警告
  • “error” 或 2 – 违反规则会报错(屏幕上一堆错误代码~)

package.json

GET请求

由于一开始我不了解ESLint就写项目,不知道要看Standard的文档,所以遇到了很多ESLint的错误和警告,分享下希望能对朋友们有帮助。

 "devDependencies": { ... "vue-router": "^2.1.1", ... },
// Make a request for a user with a given IDaxios.get('/user?ID=12345') .then(function  { console.log; }) .catch(function  { console.log; });// Optionally the request above could also be done asaxios.get('/user', { params: { ID: 12345 } }) .then(function  { console.log; }) .catch(function  { console.log; });

1. Do not use ‘new’ for side effects

该错误是由于我删除了/* eslint-disable no-new*/这段注释引发的,/* eslint-disable */这段注释的作用就是不让eslint检查注释下面的代码。

new Vue({ el: '#app', router, template: '<App/>', components: { App }})

错误原因:不可以直接new一个新对象,需要将新对象赋值给一个变量。

var vm = new Vue()

下面让我们来配置路由并实现我们的第一次页面跳转。官方提供的demo很简单,复制到HTML中也的确能跑,但是问题是不知道如何在SPA应用中使用,这坑了我不少时间。在看了不少他人的项目后,完成了SPA路由的简单实现demo(基于vue-cli的webpack模板)。main.js

POST请求

2. Strings must use singlequote

错误原因:字符串必须用单引号

return { msg: "Welcome to Your Vue.js App", //双引号,报错! }
import Vue from 'vue'import App from './App'import VueRouter from 'vue-router'import Page01 from './components/page01'import Page02 from './components/page02'Vue.use(VueRouter)//全局安装路由功能//定义路径const routes = [ { path: '/', component: Page01 }, { path: '/02', component: Page02 },]//创建路由对象const router = new VueRouter({ routes})new Vue({ el: '#app', template: '<App/>', components: { App }, router})
 axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function  { console.log; }) .catch(function  { console.log; });

3. Expected space after “return”

错误原因:括号两侧必须要有空格隔开

return{// 没有空格报错 msg: 'Welcome to Your Vue.js App', }startClock {中间没有空格,报错!

App.vue

同时执行多个请求

4. Expected indentation of 8 spaces but found 6

错误原因:使用两个空格进行缩进。

 if (this.IntervalID === '') { this.IntervalID = setInterval(this.countDown, 1000) }

其实ESLint的报错并不难懂,只要理解错误原因还是很好解决的。如果提前看看文档,更不会出现太多报错问题了。这个故事告诉我们看文档是很重要滴~%>_<%

发现ESLint的报错都会在报错语句前面显示一个URL,点击进去可以看到详细的错误信息哦。这是我刚在写博客的时候发现的。

 http://eslint.org/docs/rules/no-new Do not use 'new' for side effects E:\Github\EfficiencyTools\EfficiencyTool-VueMobile\src\main.js:15:1 new Vue({

这里的
就是ESLint规则报错的原因,还是很人性化的。

推荐使用VSCode来编辑代码。按照着VSCode拓展插件推荐——提高Node和Vue开发效率来安装和配置插件后,写vue项目方便了很多。

最后我常用的eslint配置

// add your custom rules here rules: { // allow async-await 'generator-star-spacing': 'off', // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 必须设置分号 'semi':['error','always'], // 空格关闭 'no-tabs':'off', // 缩进为0 'indent': 0 }

图片 2image.png

其实vue-cli的ESLint不需要我们配置太多,基本的都配置好了,如果你愿意完全可以照着vue-cli提供的规则去写代码。当我们需要修改一些规则的时候添加到rules中替换原有规则就可以了。一开始用ESLint写代码很烦,经常由于一些格式问题调试报错,让回去改格式。不过慢慢的就会发现使用ESLint之后代码的确可读性、美观性上都好了很多。推荐使用ESLint来规范代码编辑~

<template> <div > <router-link to="/">01</router-link> <router-link to="/02">02</router-link> <br/> <router-view></router-view> </div></template>
function getUserAccount() { return axios.get('/user/12345');}function getUserPermissions() { return axios.get('/user/12345/permissions');}axios.all([getUserAccount(), getUserPermissions .then(axios.spread(function (acct, perms) { // Both requests are now complete }));

page01.vue

其实和其他的ajax库一样,基本用法都是差不多的。大家一看就知道怎么用。

<template> <div> <h1>page02</h1> </div></template>

可以直接通过config来完成请求axios

发表评论

电子邮件地址不会被公开。 必填项已用*标注