generator-vue-app

the scaffold of the vue web app

使用方法

1. 安装脚手架工具

npm install -g yo

2. 安装生成器

npm install -g generator-vue-app

使用-g进行全局安装，在以后每次新建项目时不需再次安装，可直接创建项目。

3. 创建项目

yo vue-app

4. 目录结构

按上述步骤操作后，会得到如下目录结构：

├───package.json                  //包描述文件，包含基本模块的依赖
├───webpack.dev.config.js         //用于开发环境的webpack配置文件
├───webpack.prod.config.js        //用于生产环境的webpack配置文件
├───.gitignore                    //上传到github或gitlab时忽略不必要的文件
├───src/                          //源码的根目录
│   └───fonts/                    //放置自定义字体
│   └───images/                   //放置图片资源
│   └───javascripts/              //存放脚本的根目录
│     └───components/             //放置组件
│     └───constants/              //放置常量
│     └───libs/                   //放置第三方库
│     └───utils/                  //放置项目中的公共代码
│     └───main.js                 //入口脚本文件，对于简单的项目，一般用于绘制根组件
│   └───stylesheets/              //放置样式文件

5. 安装依赖

在项目根目录下执行：

npm install

6. 进入开发阶段（实时刷新）

npm run dev

在浏览器上打开地址localhost:8080（端口可以修改），即可在页面上看到Hello Vue，同时进入开发阶段，修改文件并保存后页面会实时刷新。

1. hello-vue组件只用做demo演示，实际开发时需要通过删除hello-vue目录删除该hello-vue组件。

2. 有时运行该命令时会报如下错误：Error: listen EADDRINUSE 127.0.0.1:8080，遇到这种情况需要按照下面方法修改端口： 修改package.jso文件内scripts字段的dev命令，找到--port，将其后面的8080改为其他端口，如3000。

7. 编译打包

npm run buld

编译后会生成dst目录，测试或发布时使用该目录即可。

8. 创建组件

在项目根目录下执行：

yo vue-app:vue-component

该命令会根据向导在src/javascripts/components/目录下创建相应组件。

Getting To Know Yeoman

• Yeoman has a heart of gold.
• Yeoman is a person with feelings and opinions, but is very easy to work with.
• Yeoman can be too opinionated at times but is easily convinced not to be.
• Feel free to learn more about Yeoman.

License

MIT © gongzhen