Vue环境搭建和创建你的第一个项目

1，安装node.js

安装node，进入官网http://nodejs.cn/下载安装。

安装完毕后，按住键盘windows + R打开运行窗口输入cmd，

回车，出现命令窗口，输入

node -v

出现版本号就是安装成功了

npm -v

查看npm的版本号。

2，安装Vue-cli

还是这个命令窗口，接着输入

npm install --global vue-cli

这个安装的是2.x的版本，如果需要最新版，请输入

npm install -g @vue/cli

ps：如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过

npm uninstall vue-cli -g

或

yarn global remove vue-cli

卸载它。如果你觉得npm安装的太慢了，请先安装淘宝镜像

npm i -g cnpm --registry=https://registry.npm.taobao.org

然后使用淘宝镜像安装。
2.x版

cnpm install --global vue-cli

4.x版

cnpm install -g @vue/cli

安装成功后，输入

vue -V

查看版本号

如果没出现上述版本号，应该是环境变量没配置好，此时打开我的电脑，在右上角输入框搜索vue.cmd

搜索出来后，右键打开文件地址，将文件路径复制

然后打开自己电脑的系统属性，找到环境变量设置。


将刚刚复制的路径粘贴到path这个变量的后面，注意要用

;

符号和前面的路径隔开

3，创建项目

---

3.1，创建2.x版本的项目

1，打开cmd命令窗口，进入到自己想要创建项目的盘
比如我想进入D盘，直接输入

d:

回车，就进入了D盘，然后输入

vue init webpack xxxxx

这个xxxxx是你的项目名字，必须是字母，自己起个好名字
然后一直回车，出现vue-router的时候输入y，剩下都用n，然后还是回车，直到出现安装进度条。
安装成功后，cd进入到你创建的那个文件名下面，启动项目

npm run dev

3.2，创建4.x版本的项目

前面步骤一样，进入你需要创建项目的盘，输入

vue create xxxxx

这个xxxxx是你的项目名字，必须是字母，自己起个好名字
然后出现

按↓选择Manually select features，再按 Enter，通过↑ ↓ 箭头选择你要配置的项，按 空格 是选中，按 a 是全选，按i 是反选。

这是这几个选项的说明

( ) 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） 测试

不知道怎么选就按照下图这样，选完之后按 Enter。

选择是否使用history router，Vue-Router 利用了浏览器自身的hash 模式和history模式的特性来实现前端路由（通过调用浏览器提供的接口）。这里建议选n。这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来，选y的话需要服务器那边再进行设置。

选择css 预处理器，node-sass是自动编译实时的，dart-sass需要保存后才会生效。sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现，我选择的是Sass/Scss(with dart-sass) 。

选择Eslint代码验证规则，提供一个插件化的javascript代码检测工具，ESLint + Prettier使用较多

选择什么时候进行代码规则检测

( ) Lint on save // 保存就检测
( ) Lint and fix on commit // fix和commit时候检查

建议选择保存就检测，等到commit的时候，问题可能都已经积累很多了。

选择单元测试，Mocha + Chai灵活,只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
Jest安装配置简单，容易上手。内置Istanbul，可以查看到测试覆盖率，相较于Mocha配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect。

选择如何存放配置

In dedicated config files // 独立文件放置
In package.json // 放package.json里

如果是选择 独立文件放置，项目会有单独如下图所示的几件文件

是否保存当前配置，键入N不记录，如果键入Y需要输入保存名字

然后就是等待项目创建，创建成功后，cd到你创建的文件夹路径，

npm run serve

至此，创建完毕~

---

如果看了觉得有帮助的，我是@鹏多多i，欢迎 点赞 关注 评论；
END

公众号

往期文章

• 微信小程序实现上传多张本地图片到服务器和图片预览
• JS实用方法DataUrl转为File、url转base64
• 微信小程序API交互的自定义封装

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金