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数组Array sort方法使用深入分析
Feb 21 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
Nov 26 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 Javascript
javascript实现下拉菜单效果
Feb 09 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
投票管理程序
2006/10/09 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
php广告加载类用法实例
2014/09/23 PHP
js中的如何定位固定层的位置
2014/06/15 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
深入解析Python中的集合类型操作符
2015/08/19 Python
python制作最美应用的爬虫
2015/10/28 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
使用python实现飞机大战游戏
2020/03/23 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
彪马美国官网:PUMA美国
2017/03/09 全球购物
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
毕业生求职简历的自我评价
2013/10/07 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
思想作风建设心得体会
2014/10/22 职场文书
文明礼仪倡议书
2015/04/28 职场文书
初中体育课教学反思
2016/02/16 职场文书
python基础之文件处理知识总结
2021/05/23 Python
CentOS安装Nginx并部署vue
2022/04/12 Servers
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技