使用vue-cli脚手架搭建一个vue项目

首先你得下载一个nodejs，点击这里进入下载界面，安装步骤基本上全部点下一步就行。然后配置环境变量

然后配置环境变量

然后我们安装vue-cli脚手架，在cmd当中使用命令：

npm install -g vue-cli

看到这个代表安装成功：

还有安装webpack：

npm install -g webpack

然后来到一个目录使用命令创建项目(指明用webpack打包，用vue-cli-demo作为项目名)

vue init webpack vue-cli-demo

配置如下：

# 项目名称：
Project name vue-cli-demo

# 项目描述：
Project description A vue-cli demo project

# 作者
Author XiaoHH <1431984546@qq.com>

# 单项目架构：
Vue build standalone

# 使用vue的路由：
Install vue-router? Yes

# 使用eslint
Use ESLint to lint your code? Yes

Pick an ESLint preset Standard

# 使用单元测试：
Set up unit tests No

# 使用e2e测试：
Setup e2e tests with Nightwatch? No

# 使用npm打包方式：
Should we run `npm install` for you after the project has been created? (recommended) npm

配置详情：

创建完成：

创建完成的目录：

运行：

npm run dev

启动成功：

访问 http://localhost:8080/：

同时也可以修改 conf/index.js 文件，修改结果如图

然后我们再运行 npm run dev 命令，运行后就可以在80端口自动打开浏览器了，然后讲解以下重要目录和文件：

|-config         -- 配置文件目录
|-node_modules   -- 项目依赖包的目录
|-src            -- 源代码目录
  |-components   -- 组件目录
  |-router       -- 路由组件目录
  App.vue        -- 入口的vue组件
  main.js        -- 入口的配置文件
index.html       -- 主要入口html目录
package.json     -- 依赖声明文件

下期我将讲解如何用 vue 脚手架项目和 Java 的 SpringBoot 框架整合做一个基于 WebSocket 的聊天室，敬请期待！