“再”学习不一样的Vue:环境搭建篇
# 前言
学习Vue的过程中,看完 Vue.js (opens new window) 官网的基础知识,特别想要找一个项目练练手。看到了杨怡的教程《学习不一样的Vue》,github上 vue-todos (opens new window) 标星1.5k,动手实践的过程中,碰到了各种问题,故此记录下学习的过程。
# 源地址
- 首发博客: yangyi1024 (opens new window)
- 项目源码: 源码 (opens new window)
- 项目预览: 预览 (opens new window)
这里需要注意的是,仓库中最新的代码存在一些Bug,如果要实现项目 预览 (opens new window) 中的效果,可以切换为前几个版本的分支查看
我的博客: 我的博客 (opens new window)
# 知识点
# 使用淘宝源
# 第一步:安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 第二步:使用
# 支持 npm 除了 publish 之外的所有命令, 如:
cnpm install [name]
2
3
4
5
# 使用 nrm 进行源管理
nrm 是一个npm源管理器,允许在多个npm源中切换。
# 安装 nrm
$ sudo npm install -g nrm # 全局安装 nrm
# 显示所有可用的源
$ nrm ls
# 切换淘宝源
$ nrm use taobao
# 测试源
$ nrm test
2
3
4
5
6
7
8
这里我使用淘宝源
$ 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/
2
3
4
5
6
7
8
# 使用 vue-cli 脚手架
vue-cli 是vue官方提供的用于进行项目构建的工具,这里我们就进入到了 工程化 的领域。vue-cli 是构建于 webpack (opens new window) 和 webpack-dev-server (opens new window) 之上的。
# 什么是 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
2
# 创建新项目
# 预设
预设我们使用手动配置
# 功能
下面介绍各项配置的作用
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) 测试
2
3
4
5
6
7
8
9
这里我们用到了 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 新增 vue.config.js
vue-cli升级到3之后,减少了很多的配置文件,将所有的配置项都浓缩到了vue.config.js这个文件中,所以学懂并会用 vue.config.js文件很重要。
这里有一篇关于vue-cli3的全面配置的文章供大家参考,https://segmentfault.com/a/1190000017008697
# 我的仓库
这里,我将学习过程同步到 我的仓库 (opens new window) 中
# 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
2
3
4
5
6
7
8
9