Web 前端环境搭建 Vue版

Web 前端环境搭建 Vue版

Node.js

点击下载 Node.js v8.11.3,更多版本可登录 Node.js 官网 查看下载。

下载结束后,点击安装,一路 Next

注:部分浏览器可能提示威胁,不用管他,直接点保存

安装完成后可打开 cmd 工具键入 node -v 来检测是否安装成功,若出现版本信息即表示安装成功,界面如下:

1
2
3
4
C:\Users\czq>node -v
v8.11.3

C:\Users\czq>

若未出现此界面,先不要着急,如果确认安装已经成功去检查一下环境变量 Path 是否添加,若未添加,手动添加即可,添加完成后即可重复以上步骤检测是否安装成功。

如何打开环境变量不多描述,不会的同学请自行百度。

Npm

由于新版的 Node.js 已经集成了 npm,所以之前安装 Node.jsnpm 也一并安装好了,
可以通过 cmd 输入 npm -v 来测试是否成功安装

升级 npm:

1
npm install npm -g

Nrm

nrm (npm registry manager )是 npm 的镜像源管理工具,有时候国外资源太慢,那么我们可以用这个来切换镜像源。

1
npm install -g nrm

安装完成后即可直接使用,通过 nrm ls 命令显示出所有可用的源列表, 通过 nrm use taobao 切换至国内淘宝源。

Vue

安装 Vue Devtools

安装 Vue CLI

1
npm install -g @vue/cli

Vue 环境搭建参考文档

Webpack

1
npm install webpack -g

IDEA

凭个人喜好 WebstromSublimeAtomVisual Studios Code 等都可以。

版本控制

点击下载 Git 并安装,继续一路 Next

注:环境变量记得添加。

点击下载 TortoiseGit 并安装,同样的一路下一步。

此工具亦可换成 SourceTree

Vue 学习笔记 (二) – 使用 VueCli 3

前面的文章已经简单介绍过了 Vue Cli 3 的新版本特性,下面我们就亲自上手感受一下我们新版本的脚手架工具。

先从项目搭建开始。

创建项目

打开我们的命令行工具,输入下面的命令创建项目。

1
vue create hello-world

身为一名程序员,当然要从 hello-world 开始写喽。

此处要注意 官方文档 上面这样说:

如果你在 Windows 上通过 minTTY 使用 Git Bash,交互提示符并不工作。你必须通过 winpty vue.cmd create hello-world 启动这个命令。

当然如果你的命令并没有出错的话完全可以忽略这点。

创建项目命令选项

言归正传,输入上面的命令回车后应该是下面这样子的:

1
2
3
4
5
Vue CLI v3.0.1
? Please pick a preset: (Use arrow keys)
❯ default-project (vue-router, sass, babel)
default (babel, eslint)
Manually select features

上面的第一条,也就是 default-project 这一个选项在你第一次创建项目的时候是并不会出现的,只有你第一次创建完成项目后回提示你保存为默认配置模板,下次新建项目的时候就可以使用你选用的配置快速新建项目了,不需要再重新选择配置项目了。

废话有点多,我们继续介绍这里显示的选项。

这里的第二条选项便是 vue cli 3 默认的项目模板,包含 babeleslint

第三条选项便是自主选择你项目所需的配置。

这里由于默认模板没有啥展示的必要所以我们便选择手动配置。

选取项目配置

选择第三个选项后是这个样子的:

1
2
3
4
5
6
7
8
9
10
11
12
13
Vue CLI v3.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
❯◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◯ Router
◯ Vuex
◯ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing

这里我们可以选择我们需要的配置选项,选择完成后回车进入下一步。

1
2
3
4
5
Vue CLI v3.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors
? Use history mode for router? (Requires proper server setup for index fallback
in production) (Y/n)

上面我选择添加了 Router 所以这里会问我需不需要使用 history 模式,选择是然后进行下一步,在这里需要注意的是当最后一步的时候会提示你要不要保存该配置为模板,选择是后自定义一个名字,以后就可以使用这一套配置为默认模板快速创建项目了,就是我前面的第一条默认配置选项。

如下:

1
2
3
4
5
6
7
8
9
10
Vue CLI v3.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): SCSS/SASS
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In packag
e.json
? Save this as a preset for future projects? (y/N)

然后进入项目目录,启动项目就可以了。浏览器访问 hello-world,至此大功告成。

后面文章会讲解如何修改 Vue Cli 3 项目基础配置。

更多文章可查看 我的博客

坚持原创技术分享,您的支持将鼓励我继续创作!

------------------------------------------------------------------------------------------------------------------------------------------------------------------------

本文结束 感谢您的阅读

------------------------------------------------------------------------------------------------------------------------------------------------------------------------

分享到: