vue学习：使用 vue-cli 脚手架新建 vue 工程项目

由于毕设想要用vue搭建前端界面，就去学习了vue，下面介绍如何使用nodeJS搭建一个本地的vue项目。

（1）安装node.js环境到本地

安装地址：node.js 下载官网
安装最新版就可以了

（2）配置node.js

配置的话可以看这篇：Node.js的安装及环境配置【超详细】

打开cmd，检测配置是否完成，输入 node -v / npm -v：

这样说明配置成功

（3）安装 vue-cli 脚手架工具

npm install -g vue-cli

这个命令只需要运行一次，安装上之后，以后就不用安装了。

（4）用脚手架搭项目

先新建一个空文件夹，我这里叫demo，放在D盘下面
打开cmd，cd 进入到这个项目目录之下

然后运行下面的创建语句：

vue init webpack-simple demo(你的项目名字)
或
vue init webpack demo(你的项目名字)

两者区别
vue init webpack-simple ：轻巧配置，没有多余的配置和包，但能保证项目正常运行。
vue init webpack ：完整配置，包含比较多配置和包。

运行该命令后跳出选项的解释：

• Generate project in current directory? （是否在当前目录下创建）
  Yes

• Project name (vue项目实例) Demo （项目名称）
  默认这个项目名就直接回车

• Project description A sipmle vue project （项目描述）
  直接回车

• Author （作者）
  直接回车

• Runtime + Compiler: recommended for most users（运行加编译）
  直接回车

• Install vue-router? (Y/n) （是否安装路由）
  Y

• Use ESLint to lint your code? (Y/n) （是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，并不会影响整体的运行，这也是为了多人协作，新手就不用了，一般项目中都会使用）
  Y

• Pick an ESLint preset （选择一个ESLint预设，编写vue项目时的代码风格，因为选择了使用ESLint）
  (Use arrow keys)

• Setup unit tests with Karma + Mocha? (Y/n)（是否安装单元测试）
  N

• Setup e2e tests with Nightwatch(Y/n)?（是否安装e2e测试）
  N

回车后进行相关包的安装，接下来一个vue项目就建成了

（5）运行vue项目

新建完成后

cd demo //进行项目文件夹

npm install //安装node_modules文件夹（该文件里的内容就是之前安装的依赖）

npm run dev //运行项目

文件夹目录如下：

运行成功截图：