首先你得下载一个nodejs，点击这里进入下载界面，安装步骤基本上全部点下一步就行。然后配置环境变量
然后配置环境变量
然后我们安装vue-cli脚手架，在cmd当中使用命令：
npm install -g vue-cli • 1
看到这个代表安装成功：
还有安装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 <[email protected]> # 单项目架构： 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
启动成功：
同时也可以修改 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 的聊天室，敬请期待！
