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 相关文章推荐
用JavaScript调用WebService的示例
Apr 07 Javascript
下拉框select的绑定示例
Sep 04 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
vue过渡和animate.css结合使用详解
Jun 14 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 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实现事件机制实例分析
2015/06/26 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
整理Python中的赋值运算符
2015/05/13 Python
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
python实现SOM算法
2018/02/23 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
python开启debug模式的方法
2019/06/27 Python
linux 下selenium chrome使用详解
2020/04/02 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
触电现场处置方案
2014/05/14 职场文书
硕士生找工作求职信
2014/07/05 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android