vue-cli构建项目

vue-cli构建项目

通过阅读本文，能够使用vue-cli快速构建webpack模版项目。

准备工作

• 安装、并了解Node.js
• 了解npm
• 了解并使用npm安装webpack
• 使用npm安装vue

---

开始

---

全局安装vue 及 vue-cli

在命令行内运行npm i vue -g
安装完vue后,在命令行内运行npm i vue-cli -g

---

初始化项目

选择一个目录作为项目地址，并在此处按住shift+右键选择’在此处打开命令行’(本文使用的目录地址为G:)。

我们需要使用vue init命令来初始化项目，具体格式如下:

$ vue init <template-name> <project-name>

< template-name >表示模板名称，vue-cli官方为我们提供了5种模板:

• webpack-一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。
• webpack-simple-一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。
• browserify-一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
• browserify-simple-一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。
• simple-一个最简单的单页应用模板。

< project-name >：标识项目名称，这个你可以根据自己的项目来起名字。
在实际开发过程中，我们一般使用webpack模版：

$ vue init webpack test

其中项目名称为test，ESLint代码验证、unit tests、e2e tests视项目情况决定是否开启。

运行项目

在项目目录(本文目录为G:/test)内打开命令行，运行npm run dev

G:\test> npm run dev

打开浏览器，在地址栏输入localhost:8080，出现如下页面表示项目构建成功:

注意:如果8080端口被占用，执行npm run dev则会报出如下错误:

此处需要结束使用8080端口的进程，或者更换项目端口。

---

后话

本文具体只讲到了vue-cli构建项目的方法，具体内容按官网为主。
后续有空会补上node安装填坑、更换项目端口等内容。

补充

node安装填坑