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选项会多出配置选项

  1. "devDependencies": {
  2. "babel-cli": "^6.26.0",
  3. "babel-preset-es2015": "^6.24.1"
  4. }

  安装完后,还需要在本地引入个.babelrc文件,并打开录入下面的代码。其中.babelrc文件代表运行时自动加载的文件,配置等等,其中可以配置些babel的命令什么的。

  1. {
  2. "presets":[
  3. "es2015"
  4. ],
  5. "plugins":[]
  6. }

  引入完之后,执行如下命令,则可以进行es6转es5转码操作。

babel ***.js -o ***.js  我们还可以在package.json文件中配置代码,则可以npm run build 就可以进行简化该命令操作了。

  1. "scripts": {
  2. "build": "babel ***.js -o ***.js"
  3. },

  

VUE脚手架,babel转码 常用命令的更多相关文章

  1. vue脚手架创建项目及常用配置

    首先安装配置这两篇挺好的 https://www.cnblogs.com/lgx5/p/10732016.html https://blog.csdn.net/qiang510939237/artic ...

  2. 基于vue脚手架的项目打包上线(发布)方法和误区

    最近要把vue脚手架开发的一个项目上线,只知道vue脚手架是基于node的服务端项目,那么只需要 npm run dev 就可以轻松启动整个项目,当我想当然的给服务器配置合适的node环境(这里也遇到 ...

  3. npm常用命令和脚手架使用

    最近前端同学使用最多的莫过于vue,angualr,react等热门前端框架了.那么就避免不掉的使用npm命令,本人就经常因为这三个脚手架的使用而不得不百度相应的npm命令,不胜其烦,,,因此就整理一 ...

  4. 如何找到Linux下常用命令的源码

    Linux系统,常用命令的来源很多,有些命令是shell自带的,比如cd,通过执行help命令,可以查看当前系统所有的内置命令. 用type <cmd_name>来查看一个命令是否为内置命 ...

  5. Android源码浅析(四)——我在Android开发中常用到的adb命令,Linux命令,源码编译命令

    Android源码浅析(四)--我在Android开发中常用到的adb命令,Linux命令,源码编译命令 我自己平时开发的时候积累的一些命令,希望对你有所帮助 adb是什么?: adb的全称为Andr ...

  6. web 架构 /http协议,状态码,django中常用命令

    什么是web应用? web应用 架构 :B/S架构 | C/S架构 网站:BS架构其实就是应用程序: B是浏览器 S是sever(实现了wsgi协议,实现了socket的服务端) + applicat ...

  7. 把git仓库从码云迁到github,及git常用命令

    前言 刚开始建仓库的时候,因为网络的原因选择了国内的码云.后来又想换成github,毕竟平时github使用率比较高. 替换远程仓库地址方式如下: git remote set-url origin ...

  8. ubuntu20 源码安装nginx以及常用命令

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 ubuntu下安装nginx 个人建议还是不要自己apt-get安装,反正最后加模块还是得用源码编译安装那一套流程 下的慢的该换源换源,该换网换网 ...

  9. 码云git常用命令

    Git常用操作命令: 1) 远程仓库相关命令 检出仓库:$ git clone git://github.com/jquery/jquery.git 查看远程仓库:$ git remote -v 添加 ...

随机推荐

  1. sklearn使用小记GridSearchCV

    def test_grid_search(): from sklearn import datasets,svm iris = datasets.load_iris() parameters = {' ...

  2. 排序算法之快速排序(Quicksort)解析

    一.快速排序算法的优点,为什么称之为快排? Quicksort是对归并排序算法的优化,继承了归并排序的优点,同样应用了分治思想. 所谓的分治思想就是对一个问题“分而治之”,用分治思想来解决问题需要两个 ...

  3. Unreal Open Day游记

    前几天去参加了Unreal Open Day,周四早上从北京出发,坐地铁跟徐导,呵呵,simon他们汇合后,打车去了北京南站.一路上有小雨,不禁让人多少有点担心堵车,好在一路顺利.由于还没有一台较牛的 ...

  4. c# 合并重叠时间段的算法

    c# 合并重叠时间段的算法 一.采用非排序: 方案一: 使用递归算法,如不喜欢递归的伙伴们,可以使用whie代替. 1.文件:Extract_Chao.cs(核心) using System; usi ...

  5. Day 6 编码的进阶

     https://blog.csdn.net/Deft_MKJing/article/details/79460485 a.ascii码:8位表示一个字符,共可以表示2**8个(即256)字符 ,   ...

  6. 2018 Multi-University Training Contest 3

    claris出题,orzzzzzz.前一天晚上说是贪心专场,喵喵喵??? 之前clsris说难题扔多校了,据说07,13是女生赛撤下来的题,喵喵喵??? A.Ascending Rating 题目传送 ...

  7. 关于省,市,区联动 java 实现方式

    关于省,市,区的三级联动后台的实现有两种方式: 1:分三次请求各自取出 省 市 区 的数据: 2:一次请求获得所有的数据,并且组装成相依的数据结构到前端: 其中第一种方式: 会导致数据的延迟加载,出现 ...

  8. 使用SecureCRT的SFTP传输文件

    使用SecureCRT的SFTP传输文件 使用 FileZilla 上传项目更新,因为软件缓存没处理好,三个文件花了三个小时~~ 找一种缓存干扰最小的方式上传文件. 1.在使用 SecureCRT 连 ...

  9. elasticsearch5.x安装中一些问题的解决办法

    1.root超级用户不能正常启动 由于elasticsearch2.0版本以后不能使用root来启动,所以需要创建一个普通用户来启动. [root@bogon ~]# groupadd elastic ...

  10. Window Screen对象

    window.screen 对象包含有关用户屏幕的信息. window.screen对象在编写时可以不使用 window 这个前缀.一些属性: screen.availWidth // 可用的屏幕宽度 ...