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数组去重方法思路及代码
Mar 26 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
javascript中的this详解
Dec 08 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
原生js实现轮播图
Feb 27 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 Javascript
JavaScript实现随机五位数验证码
Sep 27 Javascript
JavaScript简单编程实例学习
Feb 14 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
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
php去除重复字的实现代码
2011/09/16 PHP
php gzip压缩输出的实现方法
2013/04/27 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
JS hashMap实例详解
2016/05/26 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
python 获取本机ip地址的两个方法
2013/02/25 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
商务日语毕业生自荐信范文
2013/11/14 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
公司奖励通知
2015/04/21 职场文书
律政俏佳人观后感
2015/06/09 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
编写python程序的90条建议
2021/04/14 Python
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers