新建vue项目
(1)理想状态下,IDEA系列编辑器会有新建vue项目的入口,按照常规的流程新建即可
(2)手动去新建一个vue项目流程如下:
前提:已安装node环境,安装cnpm则下载资源会比npm更快更稳定
可选项:npm i -g cnpm --registry=https://registry.npm.taobao.org
1、进入到目标路径
2、安装脚手架工具(vue-cli)
cnpm i -g vue-cli
3、查看是否安装成功
vue -V
4、项目安装
vue init webpack vuepro
提示目录已存在,是否继续:Y
Project name(工程名):回车
Project description(工程介绍):回车
Author:作者名
Vue build(是否安装编译器):回车
Install vue-router(是否安装Vue路由):回车
Use ESLint to lint your code(是否使用ESLint检查代码,我们使用idea即可):n
Set up unit tests(安装测试工具):n
Setup e2e tests with Nightwatch(测试相关):n
Should we run `npm install` for you after the project has been created? (recommended):选择:No, I will handle that myself
5、初始化项目
(1)进入项目目录
(2)初始化项目
6、运行项目
cnpm run dev
浏览器打开:localhost:8080,即可打开vue项目
Ctrl+C退出运行
7、配置idea,在idea中打开项目进行开发的配置
File - Settings - Languages&Frameworks - JavaScript:修改JavaScript language version为ECMAScript 6,确认
File - Settings - Plugins:搜索vue,安装Vue.js
Run - Edit Configurations...:点击加号,选择npm,Name为Run,package.json选择你工程中的package.json,Command为run,Scripts为dev,然后就可以直接在idea中运行了
继续点击加号,选择npm,Name为Build,package.json选择你工程中的package.json,Command为run,Scripts为build,然后就可以直接在idea中打包了。