详解vue-cli 脚手架 安装


Posted in Javascript onApril 16, 2019

一、 node安装

1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v (检查一下 版本);

详解vue-cli 脚手架 安装

2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , node 安装地址:http://nodejs.cn/download/

注 :安装 vue-cli 脚手架目前需要node版本为 v4.0 以上;

二、 vue-cli 全局安装

命令行执行 : npm install -g vue-cli // 加-g是安装到全局

安装完成以后可以输入命令:vue 回车,可以看到针对vue的命令行;

详解vue-cli 脚手架 安装

**:如果npm在国内的网络环境下可能会比较慢,解决方案:

使用淘宝镜像:

1>.官方网址:http://npm.taobao.org;

2>.安装:npm install cnpm -g --registry=https://registry.npm.taobao.org; 注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;

3>.注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm(以下操作将以cnpm代替npm)。

4> 如何更新npm的方法: 可以使用 npm install -g npm 来更新版本

三、初始化项目

执行命令: vue init webpack demo(你新建的项目名称/文件名称)

执行之后将会 自动初始化一个文件夹 :demo

详解vue-cli 脚手架 安装

手动打开demo文件夹 可以看到 已经初始化好了 一个基本的项目:

详解vue-cli 脚手架 安装

四、启动项目

如上图所示,执行初始化项目以后,下面会有对应的命令:

详解vue-cli 脚手架 安装

继续执行: cd demo (这是进入到demo文件夹的命令)

然后执行 安装 :npm install

详解vue-cli 脚手架 安装

注: npm install 执行可以进行vue已经vue的插件安装,在第三步的时候,已经初始化了项目,并且在 package.json 里面已经有相关配置,所以在这里可以直接安装;

安装完成之后再执行命令: npm run dev

整个项目就已经启动了:

详解vue-cli 脚手架 安装

五、项目文件配置介绍

build 和 config 是关于webpack的配置,里面包括一些server,和端口;

node_modules: 安装依赖代码库;

src : 存放源码;

static:存放第三方静态资源的,static里面的.gitkeep,如果为空,也可以提交到gitHub上面,正常情况下,是不可以提交的。

.babelrc:把es6文件编译成es5

.babelrc文件

{
 "presets": ["es2015", "stage-2"],//表示预设,表示babelrc转换预先需要安装的插件
 "plugins": ["transform-runtime"],//把es6的方法做转换
 "comments": false //false表示转换后代码不生成注释
}

.editorconfig:编辑器的配置

.editorconfig

charset = utf-8 //编码
indent_style = space //缩进风格,基于空格做缩进
indent_size = 2  //缩进大小是2格
end_of_line = lf  //换行符的风格
insert_final_newline = true //当你创建一个文件,会自动在文件末尾插入新行
trim_trailing_whitespace = true //自动移除行尾多余空格

.eslintignore 忽略语法检查的目录文件

就是忽略对build/*.js和 config/*.js

package.json :

{
 "name": "demo",
 "version": "1.0.0",
 "description": "demoApp",
 "author": "",
 "private": true,
 "scripts": { /*表示可以执行一些命令,例如:npm run dev会执行node build/dev-server.js,npm run build会执行node build/build.js,因此可以通过scripts配置脚本*/
  "dev": "node build/dev-server.js",
  "build": "node build/build.js",
  "lint": "eslint --ext .js,.vue src"
 },
 "dependencies": { /*项目的依赖*/
  "vue": "^2.2.2",
  "vue-router": "^2.2.0"
 },
 "devDependencies": { //编译需要的依赖
  .......................
 },
 "engines": {
  "node": ">= 4.0.0",
  "npm": ">= 3.0.0"
 },
 "browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
 ]
}

入口文件: index.html 和 main.js

 以上所述是小编给大家介绍的vue-cli脚手架安装详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
jqgrid 简单学习笔记
May 03 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
十分钟教你上手ES2020新特性
Feb 12 Javascript
JS实现简易贪吃蛇游戏
Aug 24 Javascript
详解jquery和vue对比
Apr 16 #jQuery
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 #Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 #jQuery
vue+element UI实现树形表格带复选框的示例代码
Apr 16 #Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 #Javascript
Vue 理解之白话 getter/setter详解
Apr 16 #Javascript
在vue中使用setInterval的方法示例
Apr 16 #Javascript
You might like
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
php 使用array函数实现分页
2015/02/13 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
2015/11/05 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
python使用递归解决全排列数字示例
2014/02/11 Python
python实现给字典添加条目的方法
2014/09/25 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
python列表的增删改查实例代码
2018/01/30 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
如何利用cmp命令比较文件
2013/09/23 面试题
急诊科护士自我鉴定
2013/10/14 职场文书
质检部岗位职责
2013/11/11 职场文书
商务日语毕业生自荐信
2013/11/23 职场文书
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
MYSQL如何查看操作日志详解
2022/05/30 MySQL