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 相关文章推荐
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
vue页面更新patch的实现示例
Mar 25 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异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
PHP session 会话处理函数
2016/06/06 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
Python Socket编程详细介绍
2017/03/23 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
python和opencv实现抠图
2018/07/18 Python
Python常用编译器原理及特点解析
2020/03/23 Python
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
日语翻译个人求职的自我评价
2013/10/14 职场文书
班长竞选演讲稿
2014/04/24 职场文书
网络技术专业求职信
2014/05/02 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
成本会计实训报告
2014/11/05 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS
python_tkinter事件类型详情
2022/03/20 Python