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 相关文章推荐
一个用js实现的页内搜索代码
May 23 Javascript
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
用JQuery调用Session的实现代码
Oct 29 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
js实现盒子滚动动画效果
Aug 09 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
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
十大“创意”战术!
2020/03/04 星际争霸
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
python中os操作文件及文件路径实例汇总
2015/01/15 Python
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
python实现mean-shift聚类算法
2020/06/10 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
美国最大的团购网站:Groupon
2016/07/23 全球购物
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
印度低票价航空公司:GoAir
2017/10/11 全球购物
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
《月迹》教学反思
2014/02/19 职场文书
离婚答辩状范文
2015/05/22 职场文书
大学生入党群众意见书
2015/06/02 职场文书
python如何做代码性能分析
2021/04/26 Python
Python的这些库,你知道多少?
2021/06/09 Python
Java8中Stream的一些神操作
2021/11/02 Java/Android
Oracle表空间与权限的深入讲解
2021/11/17 Oracle