详解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事件热键兼容ie|firefox
Dec 30 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
JS实现购物车基本功能
Nov 08 Javascript
js实现自动锁屏功能
Jun 02 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中uploaded_files函数使用方法详解
2011/03/09 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
Vue.set 全局操作简单示例
2019/09/19 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
python爬虫的工作原理
2017/03/05 Python
详解python基础之while循环及if判断
2017/08/24 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
Python列表list操作相关知识小结
2020/01/29 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
小学生读书感言
2014/02/12 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
银行竞聘报告范文
2014/11/06 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
最美乡村教师观后感
2015/06/11 职场文书
学校远程教育工作总结
2015/08/11 职场文书
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python