vue-cli创建项目，vue项目目录介绍

关注

最新推荐文章于 2026-06-06 09:29:17 发布 · 1.1k 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

· GEO检测

如何创建一个vue项目（详细步骤）一、环境准备 1、安装node.js 推荐下载地址：https://nodejs.org/en/ 2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功二、搭建vue环境 1、全局安装@vue/cli 推荐下载地址：https://cn.vuejs.org/ 2、在命令行输入 npm install -g @vue/cl... 阅读详情

vue-cli创建项目

环境搭建

- 安装node

官网下载安装包，傻瓜式安装：https://nodejs.org/en

- 安装cnpm

-加速下载第三方模块：（用来替换npm命令的)

npm install -g cnpm --registry=https://registry.npm.taobao.org

- 安装脚手架

cnpm install -g @vue/cli

- 清空缓存处理

npm cache clean --force

项目的创建

使用vue脚手架，创建vue项目
vue create 项目名

// 要提前进入目标目录(项目应该创建在哪个目录下)

// 选择自定义方式创建项目，选取Router, Vuex插件

//标准eslint，自动修复（ESlint+Standard config--》lint on save+Lint and fix on commit）

另一种创建vue项目方式：图形化界面

vue ui 使用图形界面创建项目

运行项目

运行vue项目的两种方式

-使用名：npm run dev
-使用pycharm运行：绿色箭头

vue项目目录介绍

first_vue #项目名
   -node_modules # 项目有很多依赖都放在这，等同python的 .venv文件夹，可以删掉，非常多小文件，复制很慢，如果没了，执行 cnpm install 就可以在装上，装完项目可以运行
-public # 文件夹（一般不动）
favicon.ico # 网站小图标
   index.html # spa：单页面应用---》整个vue项目其实就这一个html页面，以后都是组件切换
-src # 开发重点，以后代码几乎都是写在这里
   -assets # 放一些静态资源：图片，css，js
   -logo.png # 组件中使用的图片
-components # 放组件：小组件
   -HelloWorld.vue # 默认提供给咱们的
-views # 放组件：页面组件
HomeView.vue # 首页
AboutView.vue#关于
-router # 装了vue-router就会有这个文件夹
   -index.js
-store # 装 vuex 就会有这个文件夹
   -index.js
-main.js # 整个项目的入口
-App.vue #根组件

-.gitignore # 使用了git，忽略文件
-babel.config.js #装了bable就会生成它---》语法转换--》可以写es高版本语法
-package.json # 放了项目的依赖
-package-lock.json # 锁定文件--》锁定依赖的版本
-README.md #介绍文件
-vue.config.js # vue配置文件一般不动