目录
引言
本系列教程旨在帮助一些零基础的玩家快速上手前端开发。基于我自学的经验会删减部分使用频率不高的内容，并不代表这部分内容不重要，只是对于初学者来说没必要一开始就学的面面俱到。我希望可以先通过主干内容带大家入门前端，细节技巧性内容，可以在后续的开发工作中自行发现并掌握。
截止到目前为止，vue已经发布到3.5版本了。理论上来讲前端技术学新的比较好，但是鉴于目前存在一些老项目仍然使用vue2版本，而且vue2基础的语法也会沿用到vue3框架中。所以我打算先从vue2入手，再单独开一个vue3的教程对比着学。了解两者的区别，在面对新老项目时心里不慌。
本次教程从应用角度出发，直接从vue工程开始学习。不要先学原理再应用，而是先应用，感兴趣的再去研究原理。
我是比较反感 TypeScript 的，他违背了js作为动态语言的灵魂，所以教程里不会出现ts语法。（此观点仅供大家批判 =。=）
一、前期准备
1. 熟悉如何调起控制台
这是我们前端工程经常要使用的东西
1.1 全局打开控制台
键盘按下 win + R ，在弹出窗内输入cmd回车，打开控制台。（注意此时打开的目录是系统根目录）
1.2 指定目录打开控制台
在指定文件目录下，选中导航栏，输入cmd后按下 回车键 弹出cmd控制台窗口。（此时cmd路径为当前目录下）
1.3 推荐使用vscode集成控制台
如果你按照我的【前端开发入门】前端开发环境配置 安装了vscode编辑器，那么你应该可以在指定目录的空白处右键选择 通过code打开 文件夹。
打开后按下 Shift + Ctrl + ~ 按键打开集成终端。也可以在编辑器顶部找到 终端 选项卡点击选择 新建终端 。
配置默认命令行工具，一般情况下你的电脑会有 PowerShell 、Git Bash 、Cmd，推荐使用 Cmd。按照下图配置默认终端工具，完成后当你之后打开终端都会是 Cmd。
使用vscode集成控制台的好处是:
- 它的根目录就是当前文件夹的目录，方便我们执行命令行代码。
- 可以便捷的打开多个终端，点击
+按钮即可创建多个cmd终端。
2. 设置npm镜像
因为大部分前端工程的依赖包都存放在npm仓库中，我们在创建项目时需要拉取这些依赖包，而这个仓库服务器在国外，如果本地网络环境不好的话，往往会倒在拉取依赖这一步。我们使用淘宝的镜像源替换npm的代理，可以直接从国内服务器下载你需要的依赖，避免一些不必要的麻烦。
查看当前的镜像地址
npm config get registry
设置淘宝镜像
# 设置为淘宝镜像源
npm config set registry https://registry.npmmirror.com/
# 如果需要还原为官方默认镜像则再次设置镜像地址即可
npm config set registry https://registry.npmjs.org/
这里设置完成后没有任何返回信息（这是正常的），可以通过上一步查询镜像地址查看一下此时的镜像地址。
3. 安装vue脚手架工具
参考vue官方教程：vue脚手架安装教程
在控制台输入以下命令，安装：
npm install -g @vue/cli
在控制台输入以下命令，检查是否安装成功，当输出 @vue/cli 5.0.8 版本号时表示安装完成（版本号可能不同，有就行）
vue --version
二、创建vue工程
1. 利用vue-cli创建工程
- 在vscode中打开终端，输入以下命令创建vue工程
# 这里的 project1 为项目名称，按照自己喜好改为其他名字，尽量使用英文
vue create project1
- 选择预设配置，按下键盘方向键
↑和↓选择自己需要的预设选项，先选第三个看看里边都有啥。
回车键确认下一步
- 因为是学习vue工程，所以将默认的选项都取消掉，我们自己将来需要什么就手动加进去。使用
空格取消或勾选选项。
回车键确认下一步
- 选择vue版本，选择
2.x
回车键确认下一步
- 选择专门文件配置babel、eslint或者其他，不要和
package.json混在一起
回车键确认下一步
- 是否把这次的配置保存起来，下次在创建时直接拿来用？因为是练习项目所以就不存了，键盘输入n
回车键确认下一步
- 使用什么包管理工具，用来下载项目依赖的工具而已，选哪个都行。先选
NPM吧，感兴趣可以了解一下Yarn和PNPM（优化了下载速度和node_modules体积）。
回车键确认下一步
- 不出什么意外你应该能在终端看到以下内容，你可以按照提示分别输入两个指令启动项目。不过为了缓解强迫症，我建议关掉当前这个vscode编辑器，找到新创建的
project1文件夹，鼠标右键选择该文件夹通过code打开。或是进入project1文件夹内，在空白区域鼠标右键选择通过code打开。
2. 启动项目
打开vscode终端，输入启动命令，等待项目启动
npm run serve
启动后你的编辑器应该长这样，此时你可以复制 http://localhost:8080/ 地址，粘贴到随便一个浏览器地址栏打开。或是按住键盘 Ctrl 键别松，鼠标左键单击local地址，会自动调起浏览器打开该地址。
3. 打包项目
vue工程提供了打包脚本，可以将所有的项目代码根据互相引用关系打包成 html 、js 、 css 以及静态资源用于交付（图片、视频、音频等等）。如下图所示：
在终端输入以下脚本打包代码：
npm run build
等待打包完成，你的终端应该提示如下内容：
三、总结
以上，你已经完成了vue2.0版本工程的创建、运行、打包过程。
在此过程中：
- 熟悉了cmd控制台的使用方法。
- 了解了npm镜像源设置方法。
- 跟着过了一遍创建vue项目的全流程。
- 熟悉如何启动、打包项目。
接下来我们将认识vue工程的所有文件的作用，以及逐步在工程中完成vue语法的学习。
再接再厉~
扫一扫
732
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
