使用IDEA开发Vue项目

最新推荐文章于 2024-10-09 21:24:49 发布

程序员知码

最新推荐文章于 2024-10-09 21:24:49 发布

阅读量1.1w

点赞数 4

分类专栏：其他文章标签： vue.js intellij-idea 前端

本文链接：https://blog.csdn.net/A10714075/article/details/121191546

版权

其他专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用IDEA开发Vue项目，从安装Node.js并配置淘宝源，到安装IDEA和Vue.js插件，设置.vue文件模板，然后通过vue-cli创建项目，包括项目创建过程中的各项选项配置。最后，指导如何在IDEA中打开项目，为前端开发者提供了一站式的Vue项目搭建指南。

摘要由CSDN通过智能技术生成

使用IDEA开发Vue项目

一、软件安装

1、安装Node

Node官网下载，安装一直下一步

# 配置淘宝源
npm config set registry http://registry.npm.taobao.org/

2、安装IDEA

略…

二、插件及配置

1、安装vue.js插件

IDEA plugins中搜索vue.js并安装

2、配置vue文件

在这里插入图片描述

3、添加右键创建.vue文件

在这里插入图片描述
模板格式可以自定义

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

三、项目创建

1、安装全局vue-cli

npm install -g vue-cli

2、cmd创建项目

到指定目录运行cmd创建项目

vue init webpack 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