Vue In Action 实战Vue–搭建一个空项目(二)

20 1月

快速生成项目: vue-cli

vue 自带了项目脚手架, 即快速生成基础项目的命令工具, 就是 vue-cli.

安装  vue-cli

如果还没有安装过 npm 的, 我建议用 HomeBrew 来安装, 这里针对 MacOS 做介绍( 其他平台的请自行搜索如何安装 npm )

接下来就可以开始使用 vue-cli 生成代码了

之后会让你填写和选择一些信息, 比如:项目名,描述,作者, 选择测试框架等等…

然后就可以进入项目安装依赖了, 也可以跑起来看看

打开浏览器, 访问 http://localhost:8080 就可以看到欢迎页面啦.

快速生成项目: generator-fountain-vue

用 vue-cli 生成的项目比较单一, 没有使用任何插件. 在正式项目中显然不是最佳实践, 我们还像拥有比如 gulp, vue-reousrce, vue-loader, webpack, bowersync,karma等等工具( 这里不再一一解释这些工具, 请不清楚小伙伴们自行搜索啦 ).

所以我搜索了一些常见的vue生成工具后, 最终选择 generator-fountain-vue, 它有几乎我们所需要的所有东西, 并且工作一切正常.( 有好多工具运用起来会有很多坑, 错误等等 )

安装 yeoman, 这是一个开源的快速搭建项目的平台, 拥有几乎所有架构的脚手架, 当然你也可以实现你自己的.

安装我们想要的脚手架 gernerator-fountain-vue:

开始搭建我们的项目 vue-test

接下来选择你想用的工具即可, 项目很快就会自动搭建完成, 这里推荐用 gulp 来组建项目结构, 然后你需要安装 gulp-cli

接下来你就可以添加一个 README.md 文件啦

上一篇: Vue In Action 实战Vue–Vue.js介绍(一)

下一篇: Vue项目结构优化和介绍 

发表评论

电子邮件地址不会被公开。