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目录,就是打包好的目录。

原文: https://www.tech1024.cn/original/2948.html