使用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 相关文章推荐
javascript工具库代码
Mar 29 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
深入理解angularjs过滤器
May 25 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
js实现百度搜索提示框
Feb 05 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
js禁止表单重复提交
Aug 29 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 Javascript
JavaScript async/await原理及实例解析
Dec 02 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 输出缓存详解
2009/06/20 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
YUI的Tab切换实现代码
2010/04/11 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
几个有趣的Javascript Hack
2010/07/24 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
python 解压pkl文件的方法
2018/10/25 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
车辆维修工自我评价怎么写
2013/09/20 职场文书
造价工程师个人求职信
2013/09/21 职场文书
建筑实习自我鉴定
2013/10/18 职场文书
财务负责人任命书
2014/06/06 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
学习十八大的感悟
2015/08/11 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android
Ajax实现异步加载数据
2021/11/17 Javascript