webStorm创建vue项目

本文详细介绍如何在Node.js环境下使用命令行工具搭建Vue项目,包括必要的npm配置及项目目录结构解析,涵盖构建、配置、源码、静态文件等多个方面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在搭建vue项目时,需要有必要的环境

需要node.js环境
可以看我博文:https://blog.youkuaiyun.com/water_java/article/details/101055914

我这里使用的是cmd命令窗口搭建vue项目

可以参考我博文:https://blog.youkuaiyun.com/water_java/article/details/101353734
点击文件,打开文件目录,选择你下载的vue-cli项目
在这里插入图片描述
添加npm配置
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
我这是用的之前的项目,所以出的页面如下
在这里插入图片描述
不过新创建的页面是
在这里插入图片描述

目录解释

|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件,加载各种公共组件
|-- static // 静态文件,比如一些图片,json数据等
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico
|-- index.html // 入口页面
|-- package.json // 项目基本信息

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值