在开始之前,我们说一下怎么创建一个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
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。