Vue环境搭建和脚手架的使用

Vue环境搭建和脚手架的使用

安装环境

需要 Node.js 8.9+ (推荐 8.11.0+)

一、安装nodejs

1.1、下载

英文地址：https://nodejs.org/en/download/

中文地址：http://nodejs.cn/download/

、

1.2、安装

安装

直接双击下载后的安装包。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yBVYbWn5-1609645000940)(C:\Users\stars\AppData\Roaming\Typora\typora-user-images\image-20210103104621466.png)]

这样就安装完了，查看一下版本。

查询版本

最新版本的 Node.js 已经集成了 npm 工具，所以安装上node.js，npm 工具自然就安装上了。

node -v
npm -v

二、安装脚手架

2.1、查看全局路径并更改

• 查询全局路径

npm root -g

• 更改全局路径地址

npm config set prefix "D:\npm"

• 安装

npm install -g @vue/cli

如果安装好之后，vue命令还是不能使用，那么就配置环境变量。

• 查看脚手架版本

vue -V

V：是大写的。

2.2、配置淘宝镜像加速器

• 查询当前镜像地址

npm get registry

• 配置淘宝镜像地址

npm config set registry https://registry.npm.taobao.org

• 还原以前的镜像地址

npm config set registry https://registry.npmjs.org/

这样配置好以后，在使用 npm get registry 命令查看是否为我们配置的镜像地址

2.3、利用脚手架创建项目

DOS命令进入到项目保存的目录，也可以直接到项目保存的目录中，在地址栏输入cmd回车，就直接在项目保存的目录中了。

vue create 项目名

注意：在哪个目录下创建的，项目就保存在哪个路径下面。

• 会提示选择默认（default）还是手动（Manually）,默认的配置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项。
• 这里选择default，等待一会（如有提示等待，一直回车执行下去就行）。

现在选择手动创建方式 Manually。

Bable, （常用）解决兼容性问题,支持 ES6 的代码转译成浏览器能识别的代码
TypeScript, 是一种给 JavaScript 添加特性的语言扩展,增加了很多功能,微软开发的
Progressive Web App (PWA) Support, 渐进式的Web应用程序支持
Router,（常用）是 vue-router 路由。
Vuex, 是Vue.js应用程序的状态管理模式+库（常用）。
CSS Pre-processors, （常用）支持 CSS 预处理器, Sass/Less预处理器。
Linter/Formatter, （常用）支持代码风格检查和格式化。
Unit Testing, 支持单元测试。
E2E Testing, 支持 E2E 测试

• 选择后按回车键, 会提示: 是否使用 history 模式的路由, 按回车即可

• 选择CSS预处理

• 选择语法检查方式，这里我选择: 保存就检测

• 会提示: 把babel,postcss,eslint这些配置放哪，我选择: 放在独立文件中, 然后回来即可

• 会提示: 是否将当前项目设置的配置保存为预配置, 方便后面创建项目时, 继续使用这套配置?按回车保存即可, 下次创建项目时,就会多有一个选项(suit-center-web)

2.4、测试

这样就OK了。