WebStorm搭建Vue项目

WebStorm搭建Vue项目

• 下载WebStorm
• 安装Node.js
• 安装Webpack
• 全局安装vue-cli
• 安装git
• 启动
• Inline JavaScript is not enabled. Is it set in your options错误

下载WebStorm

http://www.jetbrains.com/webstorm/
破解Activation Code

AWAC5NN6E4-eyJsaWNlbnNlSWQiOiJBV0FDNU5ONkU0IiwibGljZW5zZWVOYW1lIjoibGIgb2QiLCJhc3NpZ25lZU5hbWUiOiIiLCJhc3NpZ25lZUVtYWlsIjoiIiwibGljZW5zZVJlc3RyaWN0aW9uIjoiRm9yIGVkdWNhdGlvbmFsIHVzZSBvbmx5IiwiY2hlY2tDb25jdXJyZW50VXNlIjpmYWxzZSwicHJvZHVjdHMiOlt7ImNvZGUiOiJJSSIsInBhaWRVcFRvIjoiMjAxOS0wNy0yOSJ9LHsiY29kZSI6IlJTMCIsInBhaWRVcFRvIjoiMjAxOS0wNy0yOSJ9LHsiY29kZSI6IldTIiwicGFpZFVwVG8iOiIyMDE5LTA3LTI5In0seyJjb2RlIjoiUkQiLCJwYWlkVXBUbyI6IjIwMTktMDctMjkifSx7ImNvZGUiOiJSQyIsInBhaWRVcFRvIjoiMjAxOS0wNy0yOSJ9LHsiY29kZSI6IkRDIiwicGFpZFVwVG8iOiIyMDE5LTA3LTI5In0seyJjb2RlIjoiREIiLCJwYWlkVXBUbyI6IjIwMTktMDctMjkifSx7ImNvZGUiOiJSTSIsInBhaWRVcFRvIjoiMjAxOS0wNy0yOSJ9LHsiY29kZSI6IkRNIiwicGFpZFVwVG8iOiIyMDE5LTA3LTI5In0seyJjb2RlIjoiQUMiLCJwYWlkVXBUbyI6IjIwMTktMDctMjkifSx7ImNvZGUiOiJEUE4iLCJwYWlkVXBUbyI6IjIwMTktMDctMjkifSx7ImNvZGUiOiJHTyIsInBhaWRVcFRvIjoiMjAxOS0wNy0yOSJ9LHsiY29kZSI6IlBTIiwicGFpZFVwVG8iOiIyMDE5LTA3LTI5In0seyJjb2RlIjoiQ0wiLCJwYWlkVXBUbyI6IjIwMTktMDctMjkifSx7ImNvZGUiOiJQQyIsInBhaWRVcFRvIjoiMjAxOS0wNy0yOSJ9LHsiY29kZSI6IlJTVSIsInBhaWRVcFRvIjoiMjAxOS0wNy0yOSJ9XSwiaGFzaCI6Ijk3MTIyNDQvMCIsImdyYWNlUGVyaW9kRGF5cyI6MCwiYXV0b1Byb2xvbmdhdGVkIjpmYWxzZSwiaXNBdXRvUHJvbG9uZ2F0ZWQiOmZhbHNlfQ==-J7A2LN3UfLpNESfB2nIwG4+t956Kn1xIQmo/rYpsWhl2RO4x5wy5eD6TFUJP8DrI77LBYiuOK1J3LYVQB9guuGsaev7Ry7cCb9SZZentiai6z3NF5FWBG3bEtc/9jWNaTJpgjbw3UtIu8XONmD3o8QcsMpl5rryUgJ0wV8JKfC1P0nyIJbqm0zY850uUELtSkSHVkWn47zV9sD87uj5h8fvXYeuwZdImIjbZYiYHO5SObgvUrNHYOWx8RSJhIndZiNLw+G9NzQdFulhE+WU/KywKiAO8bR17VCDIY2mcw0pxpA3AGt6/2kwJoZ2zp8tM7y3hZw41js7TigjoRuC4Hw==-MIIEPjCCAiagAwIBAgIBBTANBgkqhkiG9w0BAQsFADAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBMB4XDTE1MTEwMjA4MjE0OFoXDTE4MTEwMTA4MjE0OFowETEPMA0GA1UEAwwGcHJvZDN5MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxcQkq+zdxlR2mmRYBPzGbUNdMN6OaXiXzxIWtMEkrJMO/5oUfQJbLLuMSMK0QHFmaI37WShyxZcfRCidwXjot4zmNBKnlyHodDij/78TmVqFl8nOeD5+07B8VEaIu7c3E1N+e1doC6wht4I4+IEmtsPAdoaj5WCQVQbrI8KeT8M9VcBIWX7fD0fhexfg3ZRt0xqwMcXGNp3DdJHiO0rCdU+Itv7EmtnSVq9jBG1usMSFvMowR25mju2JcPFp1+I4ZI+FqgR8gyG8oiNDyNEoAbsR3lOpI7grUYSvkB/xVy/VoklPCK2h0f0GJxFjnye8NT1PAywoyl7RmiAVRE/EKwIDAQABo4GZMIGWMAkGA1UdEwQCMAAwHQYDVR0OBBYEFGEpG9oZGcfLMGNBkY7SgHiMGgTcMEgGA1UdIwRBMD+AFKOetkhnQhI2Qb1t4Lm0oFKLl/GzoRykGjAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBggkA0myxg7KDeeEwEwYDVR0lBAwwCgYIKwYBBQUHAwEwCwYDVR0PBAQDAgWgMA0GCSqGSIb3DQEBCwUAA4ICAQC9WZuYgQedSuOc5TOUSrRigMw4/+wuC5EtZBfvdl4HT/8vzMW/oUlIP4YCvA0XKyBaCJ2iX+ZCDKoPfiYXiaSiH+HxAPV6J79vvouxKrWg2XV6ShFtPLP+0gPdGq3x9R3+kJbmAm8w+FOdlWqAfJrLvpzMGNeDU14YGXiZ9bVzmIQbwrBA+c/F4tlK/DV07dsNExihqFoibnqDiVNTGombaU2dDup2gwKdL81ua8EIcGNExHe82kjF4zwfadHk3bQVvbfdAwxcDy4xBjs3L4raPLU3yenSzr/OEur1+jfOxnQSmEcMXKXgrAQ9U55gwjcOFKrgOxEdek/Sk1VfOjvS+nuM4eyEruFMfaZHzoQiuw4IqgGc45ohFH0UUyjYcuFxxDSU9lMCv8qdHKm+wnPRb0l9l5vXsCBDuhAGYD6ss+Ga+aDY6f/qXZuUCEUOH3QUNbbCUlviSz6+GiRnt1kA9N2Qachl+2yBfaqUqr8h7Z2gsx5LcIf5kYNsqJ0GavXTVyWh7PYiKX4bs354ZQLUwwa/cG++2+wNWP+HtBhVxMRNTdVhSm38AknZlD+PTAsWGu9GyLmhti2EnVwGybSD2Dxmhxk3IPCkhKAK+pl0eWYGZWG3tJ9mZ7SowcXLWDFAk0lRJnKGFMTggrWjV8GYpw5bq23VmIqqDLgkNzuoog==

输入之前先修改host文件
C:\Windows\System32\drivers\etc\hosts ，mac 的hosts路径是：/etc/hosts
结尾加上
0.0.0.0 account.jetbrains.com
0.0.0.0 www.jetbrains.com

安装Node.js

node有个包管理器npm 全称为Node Package Manager
类似于Java中的Maven，是全球最大的开源库生态系统
可以通过他下载你需要的包
查看版本
node -v
npm -v

安装Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

安装淘宝镜像（类似于阿里云的maven中央仓库镜像）
安装时间有点长
安装命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
验证命令：cnpm -v
以后的npm install可以通过cnpm install来完成
当然也可以不下，下了下载速度快一些

利用cnpm安装webpack 命令行语句为
cnpm install webpack -g
cnpm install webpack-cli -g
没下镜像的cnpm不要加c 直接用npm

安装成功测试一下 webpack -v

全局安装vue-cli

cnpm install --global vue-cli
下完验证一下
vue -V
V要大写

安装git

WebStorm创建vue项目还要安装git，自己找怎么安装，设置下git的环境变量

启动

启动之后如果报错 npm ERR! code EINTEGRITY
这时候要执行下
npm cache verify
npm cache clean --force 将node的缓存清理掉

Inline JavaScript is not enabled. Is it set in your options错误

在vue.config.js中添加

module.exports = {
css: {
loaderOptions: { // 向 CSS 相关的 loader 传递选项
less: {
javascriptEnabled: true
}
}
}
}
或者在less-loader/dist/index.js中的lessLoader函数中添加
function lessLoader(source) {
var loaderContext = this;
var options = (0, _getOptions2.default)(loaderContext);
options.javascriptEnabled = true;//添加这句话
var done = loaderContext.async();
var isSync = typeof done !== 'function';