一、环境搭建

1.1 安装node.js

首先，需要安装node.js。这个在win10系统中是自带的，可以使用命令行node -v查看版本。
正常来说，为了使用vue.js，我们需要下载更高版本的node.js。
官网地址：https://nodejs.org/en/

一般建议选择左侧LTS版本下载。下载完成后安装，使其覆盖原来的node.js即可。注意在选择环境时建议选择最后一项（同时安装node.js和npm的）。

附上一个详细的node.js安装教程链接：https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html

1.2 安装vue

此处我们使用vue-cli进行安装，它将包含vue（也就是不需要再进行vue的安装操作）
安装命令：npm install -g vue-cli

最新的vue-cli 3安装命令：npm install -g @vue/cli
建议不要安装Vue CLI 3，我第一次安装完成后发现无论是使用命令行还是使用WebStorm都无法创建项目。

---

二、创建项目

推荐两种vue项目创建方式：命令行或者WebStorm

2.1 使用命令行创建vue.js项目

使用命令vue init webpack project_name来快速创建一个vue项目。
下面为命令执行过程，其中的各项配置根据需要自行指定即可：

使用WebStorm打开该项目：

2.2 使用WebStorm创建vue.js项目

也可以使用WebStorm创建vue项目（据说是目前对前端开发者支持最好的开发软件了，jetbrains大法好啊）。下面介绍一下具体流程：
首先选择创建新项目：

然后选择vue.js，输入项目名称，自动匹配node.js，vue-cli的地址（所以必须还要先配置node和vue-cli的环境）：

下面一路next，与命令行中的可选项基本类似，顺序操作即可。

---

三、运行与展示

项目创建完毕后，我们来试着运行一下：
首先点击图示按钮添加启动配置：

选择npm，选择命令run，脚本为dev：

点击右上角启动按钮，直到控制台如下：

我们打开浏览器，访问控制台里面给出的地址：http://localhost:8082，可以看到如下界面：

这个图片就对应着我们项目components文件夹下默认的HelloWorld.vue界面。项目创建成功后呢，我们可以在此基础上添加自己想要的界面、组件等等。

---

好了，有关如何创建一个独立的vue项目的介绍就到此为止啦。
最近正在学习vue，所以之后应该会出一连续的较为基础的教程或者说笔记。希望大家喜欢！

---

交流

如果大家有兴趣一起学习技术，一起交流讨论，可以加入QQ群：701365388，目前基本没什么人气啦(ฅ´ω`ฅ)，不过有问题群主会努力解答的。嘿嘿٩(ˊᗜˋ*)و。

If you have any problem or ideas about my blogs or projects, you can contact me using any ways in the following list →_→:

• Personal Site: http://www.eknown.cn
• Github: https://github.com/laolunsi
• CSDN: https://blog.csdn.net/qq_28379809