详解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面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
jQuery $.each的用法说明
Mar 22 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
Mar 26 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 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数据库操作方法(MYSQL版)
2011/06/08 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
深入理解JavaScript定时机制
2010/10/29 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
菊花转动的jquery加载动画效果
2018/08/19 jQuery
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
python中dir函数用法分析
2015/04/17 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
金融专业个人求职信范文
2013/11/28 职场文书
酒店司机岗位职责
2013/12/14 职场文书
自考毕业自我鉴定
2014/03/18 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书