Vue项目一、准备以及初始项目解析

最新推荐文章于 2025-07-20 20:38:19 发布

原创

最新推荐文章于 2025-07-20 20:38:19 发布 · 6.9k 阅读

8 ·

CC 4.0 BY-SA版权

本文介绍了Vue项目的准备工作，包括技术栈的选择，如Vue、Vue-router、axios和Vuex等。详细讲述了安装Vue和vue-cli的过程，以及如何使用vue-cli初始化项目。文中还提到了项目目录结构，重点关注src目录下的内容，特别是App组件。此外，文章讨论了ESLint的配置及其作用，并解释了package.json文件在管理项目依赖中的角色，提供了添加和管理依赖的方法。

准备

–

技术栈

Html+css+javascript
webpack
ES6基本语法
Vue
vue-router 路由
axios 网络请求
Vuex 状态管理
scss css预编译

安装

1、安装vue

npm install vue -g

2、安装vue-cli脚手架

npm install --global vue-cli

项目初始化

1、初始项目

使用vue-cli脚手架工具初始化一个vue项目:

vue init webpack my-object
cd my-boject
npm install
npm run dev

项目目录如图：

这里写图片描述

build  //最终发布的代码存放的位置
config   //配置目录，包括端口号等
node_modules  //npm加载的项目依赖模块
src  //这里是我们要开发的目录，基本上要做的事情都在这个目录里。
static  //静态资源目录，如图片、字体等。
package.json //项目配置文件，这个用于控制项目的依赖。使用npm加载依赖时，会按照这个文件里面描述的各个依赖模块的版本进行查找，先查找node_modules目录下是否已存在某个依赖，若不存在再去网络下载，但是不会查找本地缓存中已经下载好的。
index.html  //项目的入口
static/.gitkeep  //这个文件保证这个文件夹在上传到github的时候会始终存在。因为github本身会忽略掉空文件夹。
.babelrc  // babel语法编译器的编译配置
.editorconfig  //编辑器的配置
.eslintignore  //忽略语法检查的目录
.eslintrc.js  //eslint的配置文件
.gitignore   //一些不需要上传的文件或者目录
README.md   //项目的描述文件

我们最需要关注的，就是src里面的内容

这里写图片描述

asset  //放置一些图片
components  //组件目录，用于放置一些组件
router  //路由文件
App.vue  //项目入口文件，可以将组件都写在里面
main.js  //项目的核心文件

初始文件展示

//index.html

<!DOCTYPE html>
<html>
  <head</

最低0.47元/天解锁文章

新学期VIP享超值加赠