vue-cli构建项目

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012830533/article/details/79963423

vue-cli构建项目

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

准备工作


开始


全局安装vue 及 vue-cli

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

全局安装vue-cli


初始化项目

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

打开cmd命令行

我们需要使用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

vue-cli构建配置
其中项目名称为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安装填坑

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页