转载请注明，原文地址

http://www.lgygg.wang/lgyblog/2020/03/31/vuevue%e9%a1%b9%e7%9b%ae%e7%9a%84%e5%88%9b%e5%bb%ba%e8%bf%87%e7%a8%8b/

1.Vue.js是什么

Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2.搭建Vue开发环境

）到Node.js官方下载安装包

我当前使用的node版本是v12.16.1，它自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理。至于Node的安装过程，网上已经有详细的安装过程，这里就不再赘述。安装成功后，到环境变量里配置node。

然后可以到命令行窗口测试node命令是否可用，如下图

由于国内访问速度较慢，建议将 NPM 源设置为国内的镜像，可以大幅提升安装速度。

2）安装webpack

如下图，在命令行窗口执行命令“cnpm install webpack -g”,进行webpack安装

3）安装vue-cli

在命令行窗口执行命令“npm install vue-cli -g”

3.创建vue项目

打开命令行窗口，使用cd命令定位到你要创建vue项目的路径，执行”vue init webpack 项目名称”，注意项目名称不能包含大写，然后就会出现下图的选项

①、Project name (sanfeng1)；项目名称（sanfeng1）。（确定按enter，否按N） 
②、 Project description (A Vue.js project)；项目描述。（随意输入一段简短介绍，用英文） 
③、Author；作者（确定按enter） 
④、Vue build (Use arrow keys)；（按enter，默认选择即可） 
⑤、Install vue-router? (Y/n)；安装的路由？（可安可不安，以后也可以再安，根据需求选择） 
⑥、Use ESLint to lint your code? (Y/n)；使用ESlint语法？（Y/ N）。（使用ESLint语法，就要做好心理准备，除非你非常懂ESLint语法，要不就会处处报错，建议N） 
⑦、Setup unit tests with Karma + Mocha? (Y/n)；设置单元测试？（Y / N）。（选N） 
⑧、Setup e2e tests with Nightwatch? (Y/n)；Nightwatch建立端到端的测试？（Y / N）。（选N）

上面的选项选完之后，它会安装这个项目的依赖包，最后会显示下图的内容，则说明Vue项目创建成功了。

4.运行Vue项目

开发Vue项目的编辑器有很多，例如Vue官网上推荐的HBuilder X,由于我之前进行Weex开发，使用的是idea,所以我还是使用idea来开发Vue项目。使用idea打开上面创建的项目。如下图

根据项目里的README.md文档，只需要先执行“npm install”安装项目的依赖，然后执行“npm run dev”运行项目，如下图

执行了“npm run dev”命令之后，最后在Terminal显示该项目的访问地址，则证明该项目启动成功。

可以到浏览器输入“localhost:8080”,则会显示如下界面。