windows下安装vue环境并idea集成配置

2019-09-20  文晶 

换工作了,又要鼓捣前端了,windows下安装vue环境并idea集成配置步骤,由于是新手也不清楚有些步骤是否正确,待后续验证吧。

1、下载合适的nodejs版本并安装
https://nodejs.org/en/
安装成功后 node -v /npm -v 校验是否安装成功,若提示非内外部命令则需要将node安装路径配置到系统环境变量中(%NODE_HOME%\npm)。配置好后在终端执行node -v进行校验
2、修改镜像库为国内淘宝镜像
npm config set registry http://registry.npm.taobao.org
-g 全局安装 查看node全局安装路径命令
npm root -g
本地安装目录
3、安装webpack(vue-cli是级域webpack的)
npm install -g webpack
4、安装vue-cli脚手架
npm install -g vue-cli
5、查看vue是否安装成功
vue -V
6、创建项目(一次根据提示输入,可以将测试/检查代码格式等配置N掉)
vue init webpack vuedemo
在命令执行目录下直接创建项目
7、进入项目目录进行 依赖安装
npm install
8、启动项目
npm start/npm run dev
9、访问:http://localhost:8080/#/ 页面正常启动成功
10、打包项目命令
npm run build
以上vue环境安装成功


二、idea配置vue开发环境
1、插件安装
file--Settings-Plugins搜索vue 在列表中选择Vue.js安装
2、修改语言框架
file--Settings--Languages&Frameworks--Javascript:修改JavaScript language version为ECMAScript 6,确认
3、设置运行打包命令
Run - Edit Configurations...:点击加号,选择npm,Name为Dev,package.json选择你工程中的package.json,
            Command为run,Scripts为dev,然后就可以直接在idea中运行了。
            继续点击加号,选择npm,Name为Build,package.json选择你工程中的package.json,Command为run,
            Scripts为build,然后就可以直接在idea中打包了
三、打包配置参考
1、根目录下增加app.js文件
var express = require('express');
var fs = require('fs');
var http = require('http');
var app = express();
app.use(express.static('./dist'));
app.use(function (req, res,next) {
  res.sendfile('./dist/index.html');  //路径根据自己文件配置
});
var httpsServer = http.createServer(app);
httpsServer.listen(5001, function () {
  var host = httpsServer.address().address;
  var port = httpsServer.address().port;
  console.log('app listening at http://%s:%s', host, port);
});
2、运行 app.js
node app.js

详细安装及idea配置参考:https://blog.csdn.net/mawei7510/article/details/81781042
打包运行参考:https://blog.csdn.net/qq_28584685/article/details/82252543

113°|1104 人阅读|3 条评论

熊志男  2019-09-22

改做前端了啊


文晶  2019-09-25

@熊志男 么有,领导让学习了解下


熊志男  2019-09-26

@文晶 那挺好啊

登录 后发表评论