欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Intellij IDEA搭建vue-cli项目的方法步骤

程序员文章站 2022-06-11 19:31:56
1、安装/升级node环境 对于node和npm的版本是有要求的。 可以通过 node -v (npm -v)查看当前版本,通过 where node (whe...

1、安装/升级node环境

对于node和npm的版本是有要求的。

Intellij IDEA搭建vue-cli项目的方法步骤

可以通过 node -v (npm -v)查看当前版本,通过 where node (where npm)查看安装路径。

如果node版本不符合vue-cli的要求,那么可以在下载稳定版本并安装。

Intellij IDEA搭建vue-cli项目的方法步骤

安装过程比较简单,我更新时,除了修改安装路径,其他都是一直next即可。

这里要提到一点,更新node版本后,查看版本,会发现npm的版本也已经更新了。

d:\workspace\myproject\jan2018>node -v && npm -v

v8.9.4

5.6.0

2、安装vue-cli

全局安装vue-cli,在命令行中执行npm install -g vue-cli

你可以在cmd打开命令行工具,也可以在intellij idea的terminal处执行。

3、intellij idea准备

如果你想在intellij idea的terminal中构建vue-cli项目,还需要做一点准备。如果使用cmd构建,则跳过此步骤。

1)安装vue.js

file -> settings -> plugins -> browse respositoties...

搜索vue.js,右侧提示install(截图时已安装,未安装会提示install)。安装成功后需要重启idea。

Intellij IDEA搭建vue-cli项目的方法步骤

2)file types: html 添加 *.vue类型

file -> settings -> editor -> file types -> html

点registered patterns下的+,添加 *.vue

Intellij IDEA搭建vue-cli项目的方法步骤

3)设置js

file -> settings -> language & frameworks -> javascript

选择 ecmascript 6 和 prefer strict mode

Intellij IDEA搭建vue-cli项目的方法步骤

4、构建及运行vue-cli项目

在命令行工具cmd,或者intellij idea的terminal中进入想要构建项目的目录,输入vue init webpack project-name,回车

webpack默认版本为2.0,若要指定1.0,需在webpack后加上#1.0,即vue init webpack#1.0 project-name

接下来会出现几个提示,分别是输入项目名称、描述、作者等,按实际情况选择即可。

?project name ---- 项目名称,init命令时也填了个project-name,如果无需更改,直接回车即可;

?project description ---- 项目描述,按需填写。无需填写可以直接回车;

?author ---- 作者

?vue build ---- 构建模式,一般默认第一个;

?install vue-router? ---- 是否安装vue-router。选y。后边构建项目会用到。

?use eslint to lint yout code? ---- 格式校验,按需;

?set up unit tests ---- 测试相关,按需;

?setup e2e tests with nightwatch? ---- 测试相关,按需;

?should we run ‘npm install' for you after the project has been created? ---- 按需,这里我选yes, use npm。如果选no,后续自己在目标

目录下执行npm install即可。

这样构建出来的项目,可以直接运行。进入项目所在目录,执行npm run dev,执行完看到以下提示:

your application is running here: http://localhost:8080

在浏览器打开http://localhost:8080,看到这个页面,接下来就可以开始开发了。

Intellij IDEA搭建vue-cli项目的方法步骤

5、intellij idea新建.vue格式文件

在开发的时候,会发现新建文件时并没有.vue格式文件的选择,这时我们需要做一些设置。

file -> settings -> editor -> file and code templates -> +

模板内容可以按需。可以填也可以不填

Intellij IDEA搭建vue-cli项目的方法步骤

<template>
  <div> {{msg}}</div>
</template>
<style></style>
<script>
  export default{ data () { return {msg: 'vue模板页'} } }
</script>

设置完成后,就能新建.vue格式的文件了。:)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。