zoukankan      html  css  js  c++  java
  • 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"
      },
    

      

     

  • 相关阅读:
    DNA 序列翻译
    python3 练习题100例 (二十九)猴子吃桃问题
    python3 练习题100例 (二十八)打印一定范围内的素数
    python3 练习题100例 (二十七)列表元素改写
    python3 练习题100例 (二十六)回文数判断
    python3 练习题100例 (二十五)打印一个n层金字塔
    python3 练习题100例 (二十四)打印完数
    python3 练习题100例 (二十三)与7相关的数
    python3 练习题100例 (二十二)输入两个字符串,输出两个字符串集合的并集
    python3 练习题100例 (二十一)打印一定范围内的水仙花数
  • 原文地址:https://www.cnblogs.com/yinghuochongfighter/p/9070600.html
Copyright © 2011-2022 走看看