vue开发环境搭建win10

Posted 2020-10-15 pclover11

vue开发环境搭建win10

需要安装nodejs, webpack@2.2.1, babel-cli,  vue-cli

1 安装nodejs

现在版本默认会安装nodejs 和 npm包 和 配置环境

2 检查是否安装成功，在命令行中输入

显示成功则正确

 

3 安装webpack@2.2.1 为什么要限制版本，是因为自己在安装最新版本时（3.8.1）出现各种问题，一直安装不上。

npm install -g webpack@2.2.1

 

4 安装babel-cli, 编译工具将ES6代码转换成ES5代码

npm install -g babel-cli

 

5 安装vue-cli

npm install -g vue-cli

 

6 安装预设babel-preset-es2015

npm install babel-preset-es2015 --save-dev

6.1 配置文件.babelrc

在项目的根目录创建一个文件名为 .babelrc 的配置文件，该文件用来设置转码规则和插件，基本格式如下:

{
    "presets": ["es2015"],
    "plugins": []
}

 

6.2 babel 基本用法

# 转码结果输出到标准输出
 $ babel example.js

 # 转码结果写入一个文件 (--out-file 或 -o 参数指定输出文件)
 $ babel example.js --out-file compiled.js
 或者
 $ babel example.js -o compiled.js

 # 整个目录转码 (--out-dir 或 -d 参数指定输出目录)
 $ babel src --out-dir lib
 或者
 $ babel src -d lib

 

6.3 安装新增API 转换包， babel-polyfill

npm install babel-polyfill --save-dev

 

7 如果想使用 webstorm 开发ES6文件，可以进行如下设置

将Arguments 中 --presets env 改成 --presets es2015。这样就会自动将ES6 转换成ES5 文件了。

 

8 添加对 VUE 的支持