脚本宝典收集整理的这篇文章主要介绍了第一个vue.js项目，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

写在前面

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

零、环境搭建

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

不管是windows还是mac，是英文还是中文，都差不多一个样。
LTS是稳定版，另一个是最新版，区别就是新版的可能有一些新的功能，但可能不太稳定，随便点一个就可以（不过我都是装最新版????）。

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

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

另外，安装node时会自动安装npm，所以暂时不需要再手动安装npm，接着就是傻瓜式操作，一路点击“继续”、“同意”和“安装”之类的按钮，然后会提示安装成功。

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

node -v
npm -v

如果得到下面的结果就说明安装成功了：

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

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

一、安装脚手架——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的）。

二、初始化工程

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

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

vue ui

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

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

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

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

这里可以先选择默认的，因为后续都是可以修改的。

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

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

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

如果上面的面板提示“编译成功”或者“success”等类似状态就表示项目启动成功，接着就可以用浏览器打开http://localhost:8080:

三、修改项目

项目创建成功，接着如果修改呢？
在初始化工程的时候会有文件夹的路径，在自己的文件夹下好到对应的文件夹，例如我的叫my-app：

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

写在后面

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

脚本宝典总结

以上是脚本宝典为你收集整理的第一个vue.js项目全部内容，希望文章能够帮你解决第一个vue.js项目所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。