VUE脚手架,babel转码 常用命令
vue-cli脚手架,单页面应用初始化时
npm -v 查看npm版本号
npm install vue-cli -g 全局安装vue-cli
vue -V查看vue版本号,说明vue-cli已经安装成功
vue init <template-name> <project-name> 其中template-name模板如下:
webpack-一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。
webpack-simple-一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。
browserify-一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。
browserify-simple-一个简单Browserify+vueify的模板,不包含其他功能,让你快速的搭建vue的开发环境。
simple-一个最简单的单页应用模板。
初始化完项目后,需要部署我们的工程
cd projectName 进入到工程目录
npm install 安装项目的依赖包
如果安装过程中报错,或中断可以尝试多安装几次,如果还不行,尝试用cnpm来安装,安装cnpm方法如下:
npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm是淘宝镜像,国内的所以下载更顺畅些。
cnpm -v 检查cnpm版本是否安装成功。
如果还不行,尝试用
npm config set registry http://registry.cnpmjs.org 修改 npm 的安装目录下的 npmrc文件
安装过程中报错解决方法如上,肯定还有其他报错,持续总结更新。。。
初始化项目所用的插件后,启动应用
npm run dev
babel是将es6代码转换成es5代码进行运行,明白了这个下面我们将进行本地安装配置
先初始化我们的项目,
npm init -y -y是默认同意,不用我们一个一个收敲同意同意bulabula~,同级目录下生成package.json 表示初始化成功。
npm install -g babel-cli 全局安装babel-cli。安装成功后,还需要本地安装个babel-preset-es2015及babel-cli(babel-cli可以不用本地安装,但babel-preset-es2015必须要本地安装,全局安装还是会报错的)插件。这个是个坑,摘录如下:
那么问题来了,我们怎么安装这个preset呢?global?所以这是一个坑,我在babel的issue中找到这样的一条。作者给出这样的回答:我们处理preset和plugin是依据于输入的文件,而你直接运行CLI是没有输入文件的,也就无法定位preset和plugin的位置。言下之意就是不要全局安装,虽然我们给你了你全局安装的方式。然后作者关闭了issue,表示很无奈。。。。
npm install --save-dev babel-preset-es2015 babel-cli 安装完后,本地package.json中devDependencies选项会多出配置选项
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1"
}
安装完后,还需要在本地引入个.babelrc文件,并打开录入下面的代码。其中.babelrc文件代表运行时自动加载的文件,配置等等,其中可以配置些babel的命令什么的。
{
"presets":[
"es2015"
],
"plugins":[]
}
引入完之后,执行如下命令,则可以进行es6转es5转码操作。
babel ***.js -o ***.js 我们还可以在package.json文件中配置代码,则可以npm run build 就可以进行简化该命令操作了。
"scripts": {
"build": "babel ***.js -o ***.js"
},
VUE脚手架,babel转码 常用命令的更多相关文章
- vue脚手架创建项目及常用配置
首先安装配置这两篇挺好的 https://www.cnblogs.com/lgx5/p/10732016.html https://blog.csdn.net/qiang510939237/artic ...
- 基于vue脚手架的项目打包上线(发布)方法和误区
最近要把vue脚手架开发的一个项目上线,只知道vue脚手架是基于node的服务端项目,那么只需要 npm run dev 就可以轻松启动整个项目,当我想当然的给服务器配置合适的node环境(这里也遇到 ...
- npm常用命令和脚手架使用
最近前端同学使用最多的莫过于vue,angualr,react等热门前端框架了.那么就避免不掉的使用npm命令,本人就经常因为这三个脚手架的使用而不得不百度相应的npm命令,不胜其烦,,,因此就整理一 ...
- 如何找到Linux下常用命令的源码
Linux系统,常用命令的来源很多,有些命令是shell自带的,比如cd,通过执行help命令,可以查看当前系统所有的内置命令. 用type <cmd_name>来查看一个命令是否为内置命 ...
- Android源码浅析(四)——我在Android开发中常用到的adb命令,Linux命令,源码编译命令
Android源码浅析(四)--我在Android开发中常用到的adb命令,Linux命令,源码编译命令 我自己平时开发的时候积累的一些命令,希望对你有所帮助 adb是什么?: adb的全称为Andr ...
- web 架构 /http协议,状态码,django中常用命令
什么是web应用? web应用 架构 :B/S架构 | C/S架构 网站:BS架构其实就是应用程序: B是浏览器 S是sever(实现了wsgi协议,实现了socket的服务端) + applicat ...
- 把git仓库从码云迁到github,及git常用命令
前言 刚开始建仓库的时候,因为网络的原因选择了国内的码云.后来又想换成github,毕竟平时github使用率比较高. 替换远程仓库地址方式如下: git remote set-url origin ...
- ubuntu20 源码安装nginx以及常用命令
镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 ubuntu下安装nginx 个人建议还是不要自己apt-get安装,反正最后加模块还是得用源码编译安装那一套流程 下的慢的该换源换源,该换网换网 ...
- 码云git常用命令
Git常用操作命令: 1) 远程仓库相关命令 检出仓库:$ git clone git://github.com/jquery/jquery.git 查看远程仓库:$ git remote -v 添加 ...
随机推荐
- Spring Boot 应用系列 1 -- Spring Boot 2 整合Spring Data JPA和Druid,双数据源
最近Team开始尝试使用Spring Boot + Spring Data JPA作为数据层的解决方案,在网上逛了几圈之后发现大家并不待见JPA,理由是(1)MyBatis简单直观够用,(2)以Hib ...
- 笔记本U盘安装CentOS 7
1. 下载镜像,制作U盘安装盘,设置BIOS启动等内容网上有大量的文章,本文不再赘述. 2. 开机U盘启动后会看到这样的界面: 3. 笔记本安装CentOS最容易出问题的地方在于USB安装盘的选择,如 ...
- 设计模式总结(《Head First设计模式》学习总结)
写在前面: 学习过程中不仅要熟练掌握技能,理论的消化吸收也必不可少.虽然个人更倾向于学习技术类的东西(短时间的精力投入很快就能看到成效...),但看了很多前辈的经验总结后才知道理论性的东西是绝对不能忽 ...
- 找不到请求的 .Net Framework Data Provider
1.安装 mysql-connector-net-6.9.10.msi 2.修改C:\Windows\Microsoft.NET\Framework\v4.0.30319\Config\machine ...
- 隐式等待-----Selenium快速入门(九)
有时候,网页未加载完成,或加载失败,但是我们后续的代码就已经开始查找页面上的元素了,这通常将导致查找元素失败.在本系列Selenium窗口切换-----Selenium快速入门(六)中,我们就已经出现 ...
- 记录JavaScript中使用keyup事件做输入验证(附event.keyCode表)
input的blur事件 $("#input-name").blur(function () { var value = $(this).val(); if (value === ...
- With语句上下文管理
在平时工作中总会有这样的任务,它们需要开始前做准备,然后做任务,然后收尾清理....比如读取文件,需要先打开,读取,关闭 这个时候就可以使用with简化代码,很方便 1.没有用with语句 1 2 3 ...
- Java 日志学习
Java 日志学习,主要学习log4j,(为了查找方便,直接拷贝别人文章:原文:http://www.cnblogs.com/xt0810/p/3659045.html) [结构] java日志对调试 ...
- Python3.5 学习十二 数据库介绍
MYSQL介绍: 主流三种数据库:Oracle.Mysql.Sqlserver Mysql安装和启动: windows 1安装 2启动服务 3进入bin目录,打开命令行 4 mysqladmin -u ...
- HTTP/1.0中,状态码200 301 304 403 404 500的含义?
200 OK 服务器成功处理了请求 301 重定向,请求的URL已移走 304未修改,客户的缓存资源是最新的,要客户端使用缓存 403禁止,请求被服务器拒绝了 404未找到资源 500内部服务器错误, ...