第一个vue.js项目

写在前面

本文主要给刚刚接触前端或者vue.js的同窗，旨在能够经过本文可以顺利运行起一个vue工程！

零、环境搭建

首先安装node及npm（已经安装过的自动跳过），打开node官网：

不论是windows仍是mac，是英文仍是中文，都差很少一个样。
LTS是稳定版，另外一个是最新版，区别就是新版的可能有一些新的功能，但可能不太稳定，随便点一个就能够（不过我都是装最新版😁）。

接着点击右边的最新版，就会下载一个安装包，接着找到下载位置点击安装。

没下载成功应该是网络问题，从新下载就行了。

另外，安装node时会自动安装npm，因此暂时不须要再手动安装npm，接着就是傻瓜式操做，一路点击“继续”、“赞成”和“安装”之类的按钮，而后会提示安装成功。

咱们也能够不去管这个提示（或者没有提示的），最后只要用命令行测试一下就知道是否安装成功：

node -v
npm -v

若是获得下面的结果就说明安装成功了：

至此，node环境已经搭建完毕！

到这一步也很简单，暂不须要手动配置环境变量之类的东西。

1、安装脚手架——vue-cli

为了不从零构建整个项目所浪费的成本，vue官方提供了一个直接生成基础工程的脚手架——vue-cli，对初学者上手也比较快，接着安装脚手架工具：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装成功大概是这样（相似+ @vue/cli@3.0.4就是安装成功了）：

yarn跟 npm同样，也是一个包管理工具，直接使用 yarn报错的话，能够先安装一下，官网提供的 安装方法。

若是以为npm速度慢的话能够将改为国内的淘宝npm镜像：

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

以后就可使用cnpm install进行相关依赖的安装（不过通常我是不用cnpm的）。

2、初始化工程

在vue-cli3.0开始，提供了一个图形化的界面，相比以前的命令行初始化更加直观，操做更方便，在工程启动后的数据分析以及状态管理也更加清楚。

若是上面步骤都没有问题，运行这个命令在本地启动8000端口并自动打开浏览器：

vue ui

浏览器打开的效果是这样的：

接着依次点击“建立”—>“在此建立新项目”，而后出现基础信息配置页面：

接着在“项目文件夹”的输入框下面输入项目名（如：my-app），而后点击“下一步”，到以下界面：

而后点击“建立项目”，接着就是一段等待时间，用于建立自动建立项目以及安装相关依赖。

这里能够先选择默认的，由于后续都是能够修改的。

成功以后就会看到这个界面：

接着以下图，依次点击“任务”->“serve”->“运行”：

大概几秒的时间就会启动成功，右侧面板会变成大概这样，会显示本次编译的一下信息：

若是上面的面板提示“编译成功”或者“success”等相似状态就表示项目启动成功，接着就能够用浏览器打开http://localhost:8080:

3、修改项目

项目建立成功，接着若是修改呢？
在初始化工程的时候会有文件夹的路径，在本身的文件夹下好到对应的文件夹，例如个人叫my-app：

接着就直接经过编辑器打开文件夹，而后找到对应的文件进行修改、保存便可。

写在后面

本文没什么代码，只是想对刚接触前端及vue.js的一个基本指南，代码也不一样步到github上了；
对细节、原理以及vue.js语法不作详细说明，只想能顺利的跑起来一个vue.js的Hello World!