【前端 19】使用Vue-CLI脚手架构建Vue2项目

使用Vue CLI构建Vue 2项目

请添加图片描述

引言

Vue.js 是一个构建用户界面的渐进式JavaScript框架,以其轻量级和易用性受到前端开发者的广泛喜爱。Vue CLI(Vue Command Line Interface)是一个基于Vue.js进行快速开发的完整系统,提供了零配置的项目启动、开发调试、打包部署等功能。本文将详细介绍如何安装Vue CLI,并使用它构建一个Vue 2项目,同时解析Vue CLI构建出的项目目录结构。

安装Vue CLI

首先,确保你的开发环境中已经安装了Node.js和npm(Node.js的包管理器)。你可以通过运行node -vnpm -v来检查它们是否已安装及安装的版本。

接下来,打开你的终端或命令提示符,运行以下命令来全局安装Vue CLI:

npm install -g @vue/cli  
# 或者,如果你使用yarn作为包管理器  
yarn global add @vue/cli

安装完成后,你可以通过运行vue --version来验证Vue CLI是否正确安装。

使用Vue CLI创建Vue 2项目

Vue CLI默认会创建Vue 3项目。但是,你可以通过指定一个预设或手动选择特性来创建一个Vue 2项目。目前最直接的方式是使用Vue CLI 2.x版本或通过在Vue CLI 3/4中指定Vue 2的模板。但考虑到Vue CLI 3/4的广泛使用和灵活性,这里我们采用Vue CLI 3/4,并在创建项目时手动选择Vue 2版本。

运行以下命令来创建一个新的Vue项目:

vue create my-vue2-project

在创建过程中,你会被询问几个问题,包括是否使用预设(preset)还是手动选择特性(Manually select features)。选择“Manually select features”后,你可以取消选择“Vue 3 x”配置,确保项目是基于Vue 2的。

完成配置后,Vue CLI会创建并初始化你的项目。

当然,我们也可以使用图形化界面来创建 Vue2项目

通过命令先进入到图形化界面,然后再进行vue工程的创建

vue ui
Vue CLI项目目录结构

Vue CLI创建的项目具有一个清晰和标准的目录结构,这有助于你理解和组织项目代码。以下是一个典型Vue CLI(Vue 2)项目的基本目录结构:

my-vue2-project/  
│  
├── node_modules/             # 存放项目依赖的第三方模块  
│  
├── public/                   # 静态资源目录,如index.html  
│   ├── index.html            # 项目的入口HTML文件  
│  
├── src/                      # 项目的源代码目录  
│   ├── assets/               # 存放静态资源,如图片、字体等  
│   ├── components/           # 存放Vue组件  
│   ├── router/               # 存放Vue Router配置  
│   ├── store/                # 存放Vuex状态管理配置(如果项目中使用Vuex)  
│   ├── views/                # 存放页面级别的Vue组件  
│   ├── App.vue               # 主Vue组件  
│   ├── main.js               # Vue应用的入口文件  
│  
├── .env                      # 环境变量配置文件  
├── .env.local  
├── .env.[mode]               # 针对不同环境(如开发、生产)的环境变量配置文件  
├── .gitignore                # Git忽略文件  
├── babel.config.js           # Babel配置文件  
├── package.json              # 项目配置文件和依赖列表  
├── package-lock.json         # 锁定安装时的包的版本号  
├── README.md                 # 项目说明文件  
├── vue.config.js             # Vue CLI的配置文件(可选)  
│  
└── ...

对于初学者来说,我们只要知道:

  • node_modules/ 存储了项目依赖
  • src文件下是我们要写的代码
  • vue.config.js是vue-CLI的配置文件
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值