使用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 09 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
javascript几个易错点记录
Nov 26 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 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更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
Python中返回字典键的值的values()方法使用
2015/05/22 Python
总结Python编程中函数的使用要点
2016/03/20 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
python面向对象 反射原理解析
2019/08/12 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
大专毕业生自我鉴定
2013/11/21 职场文书
会计专业求职信范文
2014/03/16 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
法院答辩状格式
2015/05/22 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书