vue项目创建

在开始之前，我们说一下怎么创建一个vue项目，现在的vue版本是2.x，不过3.0的版本估计会在明年下半年发布吧。所以我们还是用2.x的方式来说明。

最简单的方式就是使用一款IDE帮助我们创建vue项目，我用过的IDE中webstorm就可以完成这项功能，有些兴趣的可以下载使用，不过提醒大家一点，这玩意很吃内存。。。

其次，就是我们使用vue官方提供的vue-cli脚手架工具来创建一个vue项目。

npm install -g vue-cli

如果你没有安装，那么请使用上面的方式进行安装。

安装完成后，我们在命令行敲入vue来看看有哪些命令可以使用：

>vue

  Usage: vue <command> [options]

  Options:

    -V, --version  output the version number
    -h, --help     output usage information

  Commands:

    init           generate a new project from a template
    list           list available official templates
    build          prototype a new project
    create         (for v3 warning only)
    help [cmd]     display help for [cmd]

ok，我们看到了可以使用init来创建一个项目，新建一个目录来存放我们的项目，在命令行界面敲入vue init：

提示我们缺少必要的参数，其中项目模版我们使用webpack，这也是最常见的，最后一个参数就是我们的项目名称了，让我们看看创建过程。

创建完成后，我们使用hbuilder x打开项目，这个vue官方推荐的一个ide，对vue的支持很不错。

这就是我们的目录结构了。

这里引用一下他人的成果，仅供参考：

.
├── build/                      # webpack 配置文件；
│   └── ...
├── config/                     # 与项目构建相关的常用的配置选项；
│   ├── index.js                # 主配置文件
│   ├── dev.env.js              # 开发环境变量
│   ├── prod.env.js             # 生产环境变量
│   └── test.env.js             # 测试环境变量
│
├── src/
│   ├── main.js                 # webpack 的入口文件；
│   ├── common/                 # 存放项目共用的资源，如：常用的图片、图标，共用的组件、模块、样式，常量文件等等；
│   │   ├── assets/             # 存放项目共用的代码以外的资源，如：图片、图标、视频 等；
│   │   ├── components/         # 存放项目共用的组件，如：封装的导航条、选项卡等等； 备注：这里的存放的组件应该都是展示组件；
│   │   ├── network/            # 存放项目的网络模块，如：接口；
│   │   ├── compatible/         # 存放项目的兼容模块，如：适合App和微信各种接口的模块；
│   │   ├── extension/          # 存放已有类的扩展模块，如：对 Array 类型进行扩展的模块；
│   │   ├── libraries/          # 存放自己封装的或者引用的库；
│   │   ├── tools/              # 自己封装的一些工具
│   │   ├── constant.js         # 存放js的常量；
│   │   ├── constant.scss       # 存放scss的常量；
│   │   └── ...
│   └── app/                    # 存放项目业务代码；
│       ├── App.vue             # app 的根组件；
│       └── ...
│
├── static/                     # 纯静态资源，该目录下的文件不会被webpack处理，该目录会被拷贝到输出目录下；
├── test/                       # 测试
│   ├── unit/                   # 单元测试
│   │   ├── specs/              # test spec files
│   │   ├── eslintrc            # 专为单元测试配置的eslint配置文件
│   │   ├── index.js            # 测试编译的入口文件
│   │   ├── jest.conf.js        # Jest的配置文件
│   │   └── karma.conf.js       # Karma的配置文件
│   │   └── setup.js            # 在Jest之前运行的启动文件；
│   └── e2e/                    # e2e 测试
│       ├── specs/              # test spec files
│       ├── custom-assertions/  # 自定义的断言
│       ├── runner.js           # test runner 脚本
│       └── nightwatch.conf.js  # test runner 的配置文件
├── .babelrc                    # babel 的配置文件
├── .editorconfig               # 编辑器的配置文件；可配置如缩进、空格、制表类似的参数；
├── .eslintrc.js                # eslint 的配置文件
├── .eslintignore               # eslint 的忽略规则
├── .gitignore                  # git的忽略配置文件
├── .postcssrc.js               # postcss 的配置文件
├── index.html                  # HTML模板
├── package.json                # npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
└── README.md

作者：科研者
链接：https://www.jianshu.com/p/75cf57e53451
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。