Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:
阅读对象
本文时候对Node.js 和相关构建有一定了解的同学
假设已经安装好nodejs和npm。
国内用户强烈建议使用cnpm。
创建项目
## 如果使用cnpm,将npm替换成cnpm即可。
## 全局安装 vue-cli
npm install --global vue-cli
## 创建一个基于 webpack 模板的新项目,my-project为项目目录名称
vue init webpack my-project
## 接着会提示一些选项,根据自己的需求填写或选择y/n
## 项目名称
? Project name (my-project)
? Project name my-project
## 项目描述
? Project description (A Vue.js project)
? Project description A Vue.js project
## 项目作者
? Author (techlee <xxx@xxx.com>)
? Author xxx@xxx.com
? Vue build standalone
## 是否安装vue-router路由,这里选是
? Install vue-router? (Y/n) y
? Install vue-router? Yes
## 是否需要ESLint代码检查,这里选否
? Use ESLint to lint your code? (Y/n) n
? Use ESLint to lint your code? No
## 是否需要unit单元测试,这里选否
? Setup unit tests with Karma + Mocha? (Y/n) n
? Setup unit tests with Karma + Mocha? No
## 是否需要e2e,这里选否
? Setup e2e tests with Nightwatch? (Y/n) n
? Setup e2e tests with Nightwatch? No
安装相关依赖
## 走你
## 切换到项目目录
cd my-project
## 使用npm安装依赖
npm install
## 运行项目
npm run dev
大功告成
如果没有报错,则会自动打开 http://localhost:8080/#/ ,到这里就项目就搭建好了。
项目目录
.
├── build/ # webpack config files
│ └── ...
├── config/
│ ├── index.js # main project config
│ └── ...
├── src/
│ ├── main.js # app entry file
│ ├── App.vue # main app component
│ ├── components/ # ui components
│ │ └── ...
│ └── assets/ # module assets (processed by webpack)
│ └── ...
├── static/ # pure static assets (directly copied)
├── .babelrc # babel config
├── .postcssrc.js # postcss config
├── .eslintrc.js # eslint config
├── .editorconfig # editor config
├── index.html # index.html template
└── package.json # build scripts and dependencies
生产环境部署
使用 Webpack 的 DefinePlugin 来指定生产环境,以便在压缩时可以让 UglifyJS 自动删除代码块内的警告语句。
webpack --config build/webpack.dev.conf.js
如果执行成功,则会生成dist目录,就是打包好的目录。