vue.js的手脚架vue-cli项目搭建的步骤


Posted in Javascript onAugust 30, 2017

手脚架是什么?

众所周知,现在的前端项目发展得越渐越大,我们前端程序员要从0开始去搭建一套完整的项目很费时,所以这时候前端工程的手脚架就出现了。

我用得vue-cli也是其中之一,还有其他的我也说不清,我就说一下我接触比较多的这款vue-cli,

但是所有手脚架的核心:都是为了能够快速搭建一个完整的项目的结构,开发者只需要在生成的项目结构的基础上进行开发即可,非常简单高效。

然后, vue-cli 的脚手架项目模板有browserify 和 webpack ,vue-lic这个手脚架是把预定义的模板(存放在不同的服务器上)复制到本地作为项目初始结构, 官网给出了两个模板: webpack-simple 和 webpack 两种。

两种的区别在于webpack-simple 没有包括Eslint 检查功能等等功能,普通项目基本用webpack-simple 就足够了。

我用的是wbpack这个。

关于自己是否能搭建一套手脚架,这个是肯定的,只有自己写好模板,放在github上就OK了。在以后的项目搭建就可以使用自己搭建的手脚架了。

vue-cli的使用

在这里,由于我使用的代码编辑器是vs code,所以我就按着vs code的界面来展示;

下面讲到其他命令在其他的带有终端的代码编辑器也可以使用

第一步:安装vue-cli

npm install -g vue-cli

vue.js的手脚架vue-cli项目搭建的步骤

安装完成后,可以通过命令

vue list 查看有哪些模板可以调用;

vue.js的手脚架vue-cli项目搭建的步骤

第二步:搭建项目目录

命令格式:vue init <template-name> <project-name>

<template-name>:指上方的众多模板;

<project-name>: 指自己项目的名称;

例如:我使用的是webpack这个模板:  vue init webpack vuetest

vue.js的手脚架vue-cli项目搭建的步骤

第三步:安装依赖

进入新建立的文件夹里面:

命令格式:cd vuetest

在文件夹里面去安装依赖

命令格式:npm install

注意:

不用使用cnpm 淘宝这包管理器来安装依赖,这样会缺失比较多的东西;

虽然用npm去下载依赖很慢,毕竟连的是国外的链接;

下面是以来所在的地方:

vue.js的手脚架vue-cli项目搭建的步骤

第四步:直接运行

命令格式:npm run dev

直接在终端里面输入这段命令就OK了;

默认是本地的8080端口:

vue.js的手脚架vue-cli项目搭建的步骤

vue.js的手脚架vue-cli项目搭建的步骤

到这里已经OK了!

使用webpage模板搭建的vue项目目录就OK了;

注意:

在运行 npm run  dev 中可以使用  cnpm run dev 来代替。

其中

安装cnpm

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

其他用法和npm差不过。

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

Javascript 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
没有document.getElementByName方法
Aug 19 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
vue-cli3 配置开发与测试环境详解
May 17 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 #Javascript
详解使用nvm管理多版本node的方法
Aug 30 #Javascript
jquery插件开发之选项卡制作详解
Aug 30 #jQuery
浅谈angular.js跨域post解决方案
Aug 30 #Javascript
详解a++和++a的区别
Aug 30 #Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 #Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 #Javascript
You might like
php缓存技术介绍
2006/11/25 PHP
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
windows下安装python paramiko模块的代码
2013/02/10 Python
python读取word文档的方法
2015/05/09 Python
Django admin美化插件suit使用示例
2017/12/12 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
解决Python3下map函数的显示问题
2019/12/04 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
工作表扬信的范文
2014/01/10 职场文书
吃空饷专项治理工作实施方案
2014/03/04 职场文书
黄金酒广告词
2014/03/21 职场文书
公司开业庆典主持词
2014/03/21 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
公司请假条范文
2014/04/11 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
超市创意活动方案
2014/08/15 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
电话营销开场白
2015/05/29 职场文书
干部考核工作总结2015
2015/07/24 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书