Web阅读器开发系列教程（Vue环境篇）

做者：Sam

前言

上一篇手记中我向你们介绍了ePub标准，没有读过的小伙伴能够点击这里了解一下。了解ePub标准的原理后，咱们就能够正式进入电子书阅读器的开发环节，本文将带你们一块儿了解如何搭建Vue的开发环境。但愿快速上手的同窗，能够经过下面的连接找到个人课程进行学习。

Vue入门高分课程《快速入门Web阅读器开发》，已经有6800+小伙伴学习过了，赶快加入吧（当即学习）

免费课DEMO，Web电子书阅读器（当即体验）

免费课源码（当即下载）

Vue快速进阶课程《Vue2.5 实战微信读书 媲美原生App的企业级web书城》（当即学习）

实战课DEMO，高性能的Web阅读器（当即体验）

Node.js安装

nvm介绍

开发Vue项目须要安装Node.js，咱们能够直接到Node.js的官网下载安装包，下载连接点击这里，但这样管理Node.js版本比较麻烦。好比咱们安装了Node 10.10.0版本，如今但愿降级到Node 8.9.0版本，咱们得寻找Node 8.9.0的安装包，安装后还得处理环境变量以及各类兼容性问题。nvm（Node.js Version Management）能够解决这个问题，它能够很是有效地管理Node.js版本，nvm源码地址：github.com/creationix/…。

nvm安装方法（以macOS和Linux系统为例）

windows的同窗点击这里下载nvm-windows

安装nvm前建议先将以前安装的Node.js卸载，macOS卸载方法以下：

brew uninstall node
复制代码

卸载后就能够进行安装，安装nvm指令以下：

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
复制代码

或

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
复制代码

安装时当前用户根路径下必须存在.bash_profile文件（该文件的用途是在当用户登陆操做系统后，加载相应的环境变量），若是不存在该文件，能够手动建立一个，再从新执行上述安装脚本

touch ~/.bash_profile
复制代码

安装成功后会在.bash_profile文件中写入如下内容，以便咱们能够直接使用nvm指令

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This l    oads nvm bash_completion
复制代码

咱们能够从新打开终端令环境变量生效，或使用以下指令使环境变量当即生效

source ~/.bash_profile
复制代码

nvm卸载方法很简单，只须要执行以下指令就能够了：

$ rm -rf "$NVM_DIR"
复制代码

由于咱们在.bash_profile中定义了：

export NVM_DIR="$HOME/.nvm"
复制代码

环境变量$NVM_DIR指向$HOME/.nvm，$HOME指向用户根目录，$HOME/.nvm则对应用户根目录下的.nvm文件夹，这是nvm的安装路径，因此直接删除便可。执行上述指令后，还要将.bash_profile文件中安装nvm时写入的内容删除便可（清除nvm指令）。

安装Node.js和npm

安装nvm后咱们就能够很愉快地管理Node.js版本了，安装最新的Node.js版本（同时会安装npm）：

nvm install node
复制代码

安装指定版本Node.js（如安装10.10.0版本）：

nvm install 10.10.0
复制代码

查看本地已经安装的Node.js版本

nvm ls
复制代码

查看全部可用的Node.js版本

nvm ls-remote
复制代码

切换到最新的Node.js版本

nvm use node
复制代码

切换到指定版本的Node.js（如切换到10.10.0版本）

nvm use 10.10.0
复制代码

验证Node.js安装是否成功

$ node -v

v10.10.0
复制代码

验证npm安装是否成功

$ npm -v

6.4.1
复制代码

Vue CLI 3.0安装

安装vue

Vue CLI是Vue的脚手架，能够帮助咱们快速搭建Vue项目。Vue CLI 3.0官网地址点击这里，注意安装Vue CLI 3.0必须安装Node.js 8.9.或更高版本，经过如下指令安装：

npm install -g @vue/cli
复制代码

检查Vue CLI 3.0是否安装成功

$ vue --version

3.0.5
复制代码

vue指令的安装路径以下：

$ which vue
/usr/local/bin/vue
 $ ll /usr/local/bin/vue 
lrwxr-xr-x  1 root  root  46  9 20 14:16 /usr/local/bin/vue@ -> /Users/sam/.nvm/versions/node/v10.10.0/bin/vue
复制代码

因而可知nvm安装路径是用户根目录下的.nvm文件夹，node版本存放在.nvm/version/node目录下，按照版本号进行区分，咱们下载的@vue/cli包真实存放的路径为：

/Users/sam/.nvm/versions/node/v10.10.0/lib/node_modules/@vue/cli
复制代码

能够推断出，咱们后续经过Node.js v10.10.0安装的全局扩展都将存放在~/.nvm/versions/node/v10.10.0/lib/node_modules这个目录下。同理若是咱们安装的是Node.js v8.9.0版本，则扩展存放路径为~/.nvm/versions/node/v8.9.0/lib/node_modules

Vue CLI 3.0原型模式介绍

Vue CLI 3.0增长了原型模式，它能够帮忙咱们快速运行独立的vue文件，很是适合产品原型实现。使用原型模型须要安装全局扩展，安装指令以下：

npm install -g @vue/cli-service-global
复制代码

以后，咱们手动建立一个App.vue文件，写入如下内容

<template>
  <h1>Welcome to {{website}}!</h1>
</template>

<script> export default { data() { return { website: 'imooc.com' } } } </script>

<style scoped> h1 { background: gray; color: white; } </style>
复制代码

咱们在App.vue的根目录下执行如下指令：

vue serve
复制代码

或

vue serve App.vue
复制代码

成功后，会启动一个web服务

DONE  Compiled successfully in 1123ms                                  16:15:43

 
  App running at:
  - Local:   http://localhost:8083/ 
  - Network: http://192.168.31.243:8083/

  Note that the development build is not optimized.
  To create a production build, run npm run build.
复制代码

此时咱们就能够经过http://192.168.31.243:8083/访问到咱们的页面了，是否是很方便呢？

Vue CLI 3.0脚手架

建立Vue脚手架

Vue CLI 3.0建立脚手架过程更加友好，使用以下指令开始搭建：

vue create my-project
复制代码

以后会让咱们选择采用默认模式（default）或手动模式（Manually）：

• 默认模式下，咱们无需进行额外选择，vue会直接按照默认配置进行安装，整个过程很是迅速；

  

  值得一提的是Vue CLI 3.0会自动检查咱们的网络链接，若是发现npm速度很慢时，会提示是否自动转为淘宝镜像，很是人性：

  

• 手动模式下，咱们能够得到更多自主选择权，下面详细介绍。

手动模式配置

选择手动模式后，第一步是选择须要加载哪些功能，这个根据项目的实际需求来肯定：

针对咱们选择的功能，vue会询问与功能相关的基本配置，这些配置后续能够手动在配置文件中进行修改，如：

• vue-router是否启用history模式
• 采用哪一种css预处理：sass/scss、less和stylus
• eslint模式：Standard、Airbnb

等等

这里有一个很是重要的配置项：

这个配置项会让咱们选择：是否将所选功能的配置一并放入package.json，或是独立生成配置文件。默认模式选择的是In package.json，选择这种模式，全部配置文件都会写入到package.json中，若是选择In dedicated config files，则还会和2.0同样，针对每一个功能都生成独立的配置文件，如何选择看我的喜爱以及是否须要频繁改动配置，若是改动配置频繁，或者配置项较多时，分开管理会更加便利。

预设模式

完成配置后，会提示咱们是否保存配置为预设模式（preset）：

若是选择Yes，则须要咱们给预设模式起个名字，以后就能够在下次建立项目时，直接选择咱们设定好的模式了，这个功能很是赞！

若是咱们但愿修改或删除本身建立的预设，能够打开用户根目录下的.vuerc文件进行修改

vim ~/.vuerc
复制代码

若是想删除自定义的预设模式，直接删除.vuerc文件便可

rm -f ~/.vuerc
复制代码

合并或覆盖模式

当咱们建立项目时，若是vue检查到该项目已经存在，则会提醒咱们是否须要进行合并或更新：

关闭git初始化

Vue CLI 3.0初始化项目时默认会初始化git，由于如今不须要管理和协做的项目愈来愈少了，可是若是不但愿由Vue来初始化git，而但愿由手动来进行，能够经过以下方式进行项目初始化：

vue create my-project -n
复制代码

或

vue create my-project --no-git
复制代码

运行项目

运行项目与2.0并无什么区别，只是默认的运行指令变成了npm run serve

$ cd my-project/
$ npm run serve
复制代码

总结

本次向你们详细介绍了Node.js的安装方法和Vue CLI 3.0的基本用法，在下一教程中，将进一步向你们介绍Vue CLI 3.0的新特性：UI模式、环境变量以及构建方法等，并会带你们开发一个简易的阅读器，敬请期待。