“再”学习不一样的Vue：环境搭建篇

前言

学习Vue的过程中，看完 Vue.js 官网的基础知识，特别想要找一个项目练练手。看到了杨怡的教程《学习不一样的Vue》，github上 vue-todos 标星1.5k，动手实践的过程中，碰到了各种问题，故此记录下学习的过程。

源地址

首发博客: yangyi1024
项目源码: 源码
项目预览: 预览

这里需要注意的是，仓库中最新的代码存在一些Bug，如果要实现项目预览中的效果，可以切换为前几个版本的分支查看

我的博客: 我的博客
我的仓库：我的仓库

知识点

使用淘宝源

# 第一步：安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 第二步：使用
# 支持 npm 除了 publish 之外的所有命令, 如:
cnpm install [name]

使用 nrm 进行源管理

nrm 是一个npm源管理器，允许在多个npm源中切换。

# 安装 nrm
$ sudo npm install -g nrm # 全局安装 nrm
# 显示所有可用的源
$ nrm ls 
# 切换淘宝源
$ nrm use taobao
# 测试源
$ nrm test 

这里我使用淘宝源

$ nrm ls
  npm -------- https://registry.npmjs.org/
  yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
* taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/

使用 vue-cli 脚手架

vue-cli 是vue官方提供的用于进行项目构建的工具，这里我们就进入到了 工程化 的领域。vue-cli 是构建于 webpack 和 webpack-dev-server 之上的。

什么是 webpack ？有什么用？

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

可以归纳为三个作用：

打包：将多个静态资源合并，可以减少IO请求，降低服务器压力和下载带宽。
转换：将游览器无法识别的ES6语法，Sass，TypeScript 翻译成普通的JavaScript代码和css代码
优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任。

由于 WebPack 配置很复杂，Vue 尽量帮我们屏蔽了webpack的细节，让我们更关注于前端代码的编写，这也是为什么使用 vue-cli 中已经没有了 build 文件夹和 webpack.config.js

使用vue ui 可视化工具

# 使用可视化工具
$ vue ui

创建新项目

预设

预设我们使用手动配置

功能

下面介绍各项配置的作用

Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 
TypeScript // TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
Progressive Web App (PWA) Support// 渐进式Web应用程序
Router // vue-router（vue路由）
Vuex // vuex（vue的状态管理模式）
CSS Pre-processors // CSS 预处理器（如：less、sass）
Linter / Formatter // 代码风格检查和格式化（如：ESlint）
Unit Testing // 单元测试（unit tests）
E2E Testing // e2e（end to end） 测试

这里我们用到了 Babel，Router，Vuex，CSS Pre-processors(less)，如果是测试的话，可以不选择 Linter （不然会疯狂报错）

配置

我们选择Vue2，不使用历史模式，Css 使用到了Less。

运行成功

项目结构

结构

$ tree -I "node_modules" # 排除 node_modules 文件夹
.
├── README.md
├── babel.config.js # babel配置
├── package-lock.json 
├── package.json # npm 包配置
├── public # 静态资源，这里的资源不会被webpack编译压缩处理
│   ├── favicon.ico
│   └── index.html
└── src # 代码文件
    ├── App.vue # 最外层根组件
    ├── assets
    │   └── logo.png
    ├── components # 组件
    │   └── HelloWorld.vue
    ├── main.js # 入口文件
    ├── router # router
    │   └── index.js
    ├── store # vuex
    │   └── index.js
    └── views # 页面
        ├── About.vue
        └── Home.vue

新增 vue.config.js

vue-cli升级到3之后，减少了很多的配置文件，将所有的配置项都浓缩到了vue.config.js这个文件中，所以学懂并会用 vue.config.js文件很重要。

这里有一篇关于vue-cli3的全面配置的文章供大家参考，https://segmentfault.com/a/1190000017008697

我的仓库

这里，我将学习过程同步到我的仓库中

# vue 初始化的时候，已经帮我们创建好了一个仓库
$ git log 
commit ebd160887bb1e440b973082ae349c246f52cd06f (HEAD -> master)
Author: ppsteven <ppsteven@outlook.com>
Date:   Tue Nov 10 15:16:49 2020 +0800

    init
# 强制同步
$ git push -f https://github.com/PPsteven/vue-todos-exercise.git master

参考

webpack-第01节：认识WebPack的作用

vue cli3.0快速搭建项目详解（强烈推荐）

前言​

源地址​

知识点​

使用淘宝源​

使用 nrm 进行源管理​

使用 vue-cli 脚手架​

什么是 webpack ？有什么用？​

使用vue ui 可视化工具​

创建新项目​

预设​

功能​

配置​

运行成功​

项目结构​

结构​

新增 vue.config.js​

我的仓库​

参考​

前言

源地址

知识点