详解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 相关文章推荐
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
javascript定时保存表单数据的代码
Mar 17 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
Dec 06 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 Javascript
js 调用百度分享功能
Feb 27 Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 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
如何使用PHP往windows中添加用户
2006/12/06 PHP
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
php定界符
2014/06/19 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
Python实现的求解最大公约数算法示例
2018/05/03 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
python 有效的括号的实现代码示例
2019/11/11 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
简述 Python 的类和对象
2020/08/21 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
详解CSS故障艺术
2021/05/25 HTML / CSS
Python必备技巧之字符数据操作详解
2022/03/23 Python
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby