快速生成项目: vue-cli

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

安装  vue-cli

npm install -g vue-cli

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

# 一句话安装 HomeBrew
/usr/bin/ruby -e "$(curl -fsSL http://raw.githubusercontent.com/Homebrew/install/master/install)"
# 安装 npm
brew install npm
# 查看 npm 版本
npm -v

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

# 用 webpack 为模板 生成项目名为 vue-test
vue init webpack vue-test

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

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

# 安装依赖
npm install
# 运行项目
npm run dev

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

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

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

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

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

npm install -g yo

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

npm install -g generator-fountain-vue

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

# 创建一个目录, 并进入
mkdir vue-test && cd vue-test
# 开始生成项目
yo fountain-vue

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

npm install -g gulp-cli

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

# 编译
gulp or gulp build
# 运行
gulp serve
# 输出为 dist 后运行
gulp serve:dist
# 跑单元测试
gulp test
# watch 模式跑单元测试
gulp test:auto

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

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