Vue.js 初学者可能会遇到的问题

发表于 分类于 阅读次数：
正在加载今日诗词.... 本文字数： 2.3k 阅读时长 ≈ 2 分钟

1. npm 和 Yarn

Yarn https://yarnpkg.com/zh-Hans/

npm https://www.npmjs.com/

npm 和 Yarn 都是 JavaScript 的管理工具，但是 Yarn 会比 npm 快的多，Yarn 会缓存它下载的每个包，所以无需重复下载。它还能并行化操作以最大化资源利用率，安装速度之快前所未有。

2. npm 和 cnpm

npm 的仓库在国外，国内用户访问会慢很多，甚至有时候影响了项目的构建。

因此出现了 cnpm 淘宝的 npm 镜像 https://npm.taobao.org/

可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

1
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完之后就可以使用 cnpm 命令了，详细的使用方法还是看官方的说明吧 https://npm.taobao.org/

3. eslint - JavaScript 代码规范

刚开始 init Vue.js 的项目时，有关于 JavaScript 语法检查的 eslint 的选项，如果我们开了之后，会发现运行的时候可能有很多错误，但是不知道错在哪里，其实有可能不是错误，只是不符合规范。

我们可以从下面两个链接中学习一下关于 JavaScript 的规范，这个规范只是大家约定俗成的的一套规范，能够让我们开发出更加优秀的代码。虽然看着比较艰难，有些规范也有很多人争论，但这并不是我们的重点，我们的重点在如何高效率的开发出程序来。

https://github.com/standard/standard/blob/master/docs/README-zhcn.md

https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md

4. Yarn CLI 介绍

https://yarnpkg.com/zh-Hans/docs/cli/

Vuetify - Material Design Component Framework

https://vuetifyjs.com/

5. vue-2-boilerplate - 一个 Vue.js 的脚手架

Vue 2 boilerplate for developing medium to large single page applications.

https://github.com/petervmeijgaard/vue-2-boilerplate

6. Vue CLI 3

现在 Vue CLI 的版本号是 3.X.X，有关于他的用法的说明在官网上 https://cli.vuejs.org/

官网上面是这样描述 Vue CLI 3 的

Standard Tooling for Vue.js Development.

Vue.js 开发的标准工具

Vue CLI 3 的安装的方式是

1
2
3
npm install -g @vue/cli
# OR
yarn global add @vue/cli

创建一个项目：

1
2
3
vue create my-project
# OR 使用 web 管理界面管理 Vue.js 的项目
vue ui

CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。

CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了：

加载其它 CLI 插件的核心服务；
一个针对绝大部分应用优化过的内部的 webpack 配置；
项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

而之前的 Vue CLI 2 的安装方式却是不同的，因此网上的教程会让你眼花缭乱，不知所措，如果有特定需求需要安装低版本的话，按照下面的方式安装

1
npm install -g vue-cli

创建一个项目

1
vue init webpack my-project

7. vue-router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  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')
    }
  ]
})

App.vue 中这样写

1
2
3
<template>
  <router-view/>
</template>

参考文献

  • 知乎 - npm和yarn的区别，我们该如何选择？