使用vue-cli(vue脚手架)快速搭建项目的方法


Posted in Javascript onMay 21, 2018

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。这篇文章将会从实操的角度,介绍整个搭建的过程。

1. 避坑前言

其实这次使用vue-cli的过程并不顺利,反复尝试几次都遇到以下这个报错:

使用vue-cli(vue脚手架)快速搭建项目的方法

创建vue-cli工程项目时的报错

在网上查了很多资料才发现原来是node版本过低的问题,虽然没有找到官方对这个“过低”问题的解释,但是根据国外网友的经验之谈,应该是至少使用node6,我将node4更新至node8之后确实没有报错了,顺利搭建。相关答疑帖:https://github.com/vuejs/vue-cli/issues/618

使用vue-cli(vue脚手架)快速搭建项目的方法

确认node与npm的版本

将这个放在最前面说是希望大家在搭建前,应该先确保将node更新至6以上,这样能少走一些弯路。下面开始正式介绍整个构建过程。

2. 使用 vue-cli 搭建项目

下面整个过程是基于已经安装node.js和cnpm的基础上,node.js如何安装就不在这里详说了。如何全局化安装cnpm,这里简单提一下:

npm install cnpm -g --registry=https://registry.npm.taobao.org

其实对于安装vue-cli,使用npm命令和cnpm命令都是可以的,个人觉得使用npm安装的比较慢,而且很可能会因为网络问题而出错,所以还是觉得使用cnpm稳一点。

(1)全局安装 vue-cli ,在命令提示窗口执行:

cnpm install -g vue-cli

使用vue-cli(vue脚手架)快速搭建项目的方法

安装vue-cli

出现以上提示表示vue-cli正常安装成功,可以正式创建vue-cli工程项目了。

(2)安装vue-cli成功后,通过cd命令进入你想放置项目的文件夹,在命令提示窗口执行创建vue-cli工程项目的命令:

vue init webpack

使用vue-cli(vue脚手架)快速搭建项目的方法

创建vue-cli工程项目

确认创建项目后,后续还需输入一下项目名称、项目描述、作者、打包方式、是否使用ESLint规范代码等等,详见上图。安装顺利执行后会,生成如下文件目录:

使用vue-cli(vue脚手架)快速搭建项目的方法

生成文件目录

(3)生成文件目录后,使用 cnpm 安装依赖:

cnpm install

使用vue-cli(vue脚手架)快速搭建项目的方法

安装依赖

(4)最后需要执行命令: npm run dev 来启动项目,启动完成后会自动弹出默认网页:

使用vue-cli(vue脚手架)快速搭建项目的方法

启动项目

使用vue-cli(vue脚手架)快速搭建项目的方法

启动项目

使用vue-cli(vue脚手架)快速搭建项目的方法

默认网页

到这一步,就算成功利用vue-cli搭建一个vue项目了,撒花 ~

3.目录结构及其对应作用

通过vue-cli搭建一个vue项目,会自动生成一系列文件,而这些文件具体是怎样的结构、文件对应起什么作用,可以看看下面的解释:

├── build/           # webpack 编译任务配置文件: 开发环境与生产环境
│  └── ...
├── config/           
│  ├── index.js        # 项目核心配置
│  └── ...
├ ── node_module/        #项目中安装的依赖模块
  ── src/
│  ├── main.js         # 程序入口文件
│  ├── App.vue         # 程序入口vue组件
│  ├── components/       # 组件
│  │  └── ...
│  └── assets/         # 资源文件夹,一般放一些静态资源文件
│    └── ...
├── static/           # 纯静态资源 (直接拷贝到dist/static/里面)
├── test/
│  └── unit/          # 单元测试
│  │  ├── specs/       # 测试规范
│  │  ├── index.js      # 测试入口文件
│  │  └── karma.conf.js    # 测试运行配置文件
│  └── e2e/          # 端到端测试
│  │  ├── specs/       # 测试规范
│  │  ├── custom-assertions/ # 端到端测试自定义断言
│  │  ├── runner.js      # 运行测试的脚本
│  │  └── nightwatch.conf.js # 运行测试的配置文件
├── .babelrc          # babel 配置文件
├── .editorconfig        # 编辑配置文件
├── .gitignore         # 用来过滤一些版本控制的文件,比如node_modules文件夹 
├── index.html         # index.html 入口模板文件
└── package.json        # 项目文件,记载着一些命令和依赖还有简要的项目描述信息 
└── README.md          #介绍自己这个项目的,可参照github上star多的项目。
build/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 #Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 #Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 #Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 #Javascript
JS实现的文件拖拽上传功能示例
May 21 #Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 #Javascript
Vue二次封装axios为插件使用详解
May 21 #Javascript
You might like
php下使用strpos需要注意 === 运算符
2010/07/17 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
PHP实现简易计算器功能
2020/08/28 PHP
关于js遍历表格的实例
2013/07/10 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
python装饰器初探(推荐)
2016/07/21 Python
Python中异常重试的解决方案详解
2017/05/05 Python
python回调函数中使用多线程的方法
2017/12/25 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
如何运行带参数的python脚本
2019/11/15 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
2016应届毕业生自荐信范文
2016/01/28 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
pytorch实现手写数字图片识别
2021/05/20 Python
SQL Server中搜索特定的对象
2022/05/25 SQL Server