vue-cli学习

最新推荐文章于 2025-07-02 00:15:00 发布

阿小托

最新推荐文章于 2025-07-02 00:15:00 发布

阅读量286

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue java

本文链接：https://blog.csdn.net/qq_45740578/article/details/118818274

Vue 专栏收录该内容

3 篇文章

订阅专栏

Vue CLI是一个官方提供的项目脚手架，用于快速生成Vue项目的模板。它提供了统一的目录结构、本地调试、热部署、单元测试和集成打包测试等功能。在安装Node.js和Git后，通过npm全局安装Vue CLI，然后创建项目，填写项目信息并安装所需依赖。项目主要目录包括src、build、config等，src中包含assets、components、router等关键文件。运行`npm run dev`启动项目，`npm run build`打包项目。Vue CLI简化了前端项目的初始化和开发流程。

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

vue-cli

1. 什么是vue-cli

vue-cli官方提供的一个脚手架（预先定义好的目录结构及基础代码，咱们在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架)，用于快速生成一个vue 的项目模板

2. 主要功能

统一的目录结构
本地调试
热部署
单元测试
集成打包测试

3. 环境准备

Node.js
git

4. 安装vue-cli

安装Node.js

官网下载地址：https://nodejs.org/zh-cn/

如果你已经全局安装了旧版本的vue-cli(3.0以下)，你需要先通过npm uninstall vue-cli -g/yarn global remove vue-cli卸载它

安装vue-cli3.0 npm install -g @vue/cli 或者 yarn global add @vue/cli

版本是否是3.x vue --version/vue -V

这里注意下，vue build版本一般是默认的，直接enter，然后什么单元测试，eslint检查，统统直接不要，只要一个vue-router路由。

5. 创建项目：

vue init webpack firstapp

输入命令后，会询问我们几个简单的选项，我们根据自己的需要进行填写就可以了。

Project name :项目名称，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了firstapp

Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。

Author：作者，如果你有配置git的作者，他会读取。

Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y

Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n（建议），如果你是大型团队开发，最好是进行配置。

setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。

**Setup e2e tests with Nightwatch?**是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n

运行初始化命令的时候会让用户输入几个基本的配置选项，如项目名称、项目描述、作者信息，对于有些不明白或者不想填的信息可以一直按回车去填写就好了，等待一会，就会显示创建项目创建成功

打开文件夹：
在这里插入图片描述

介绍一下目录及其作用：

 build：最终发布的代码的存放位置。

 config：配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置。

 node_modules：npm 加载的项目所需要的各种依赖模块。

 src：这里是我们开发的主要目录（源码），基本上要做的事情都在这个目录里面，里面包含了几个目录及文件：

         assets:放置一些图片(会根据图片大小分类进行base64命名还是其他方式命名)，如logo等

         components:目录里放的是一个个的组件文件

         router/index.js：配置路由的地方

         App.vue：项目入口组件（跟组件），我们也可以将组件写这里，而不使用components目录。主要作用就是				将我们自己定义的组件通过它与页面建立联系进行渲染，这里面的<router-view/>必不可少。

         main.js ：项目的核心文件（整个项目的入口js）引入依赖包、默认页面样式等（项目运行后会在index.html中形成一个app.js文件）。

 static：静态资源目录(会原分不动的对文件进行处理)，如图片、字体等。

 test：初始测试目录，可删除

  .XXXX文件：配置文件。

 index.html：html单页面的入口页面，可以添加一些meta信息或者同统计代码啥的或页面的重置样式等。

 package.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。（大概版本）

 package-lock.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。（具体版本）

 README.md：项目的说明文件。

 webpack.config.js：webpack的配置文件，例：把.vue的文件打包成浏览器能读懂的文件。

 .babelrc:是检测es6语法的配置文件，例：适配哪些浏览器的限制

 .gitignore:上传到服务器忽略哪些文件的配置（比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置）

 .postcssrc.js:前缀的配置 （css转化的配置）

 .editorconfig:对代码进行规范，例：root是否进行检测，代码尾部是否换行，缩行前面几个空格...（建议定义这个规范）

 .eslintrc.js:配置eslint语法规则（在这里面的rules属性中配置让哪个语法规则失效）

 .eslintignore:忽略eslint对项目某些文件的语法规则的检查

这就是整个项目的目录结构，其中，我们主要在src目录中做修改（模块化开发）。这个项目现在还只是一个结构框架，整个项目需要的依赖资源都还没有安装。

安装项目所需要的依赖包/插件（在package.json可查看）：执行 cnpm install (npm可能会有警告，这里可以用cnpm代替npm了，运行别人的代码需要先安装依赖)如果创建项目的时候没有报错，这一步可以省略。如果报错了 cd到项目里面运行 cnpm install / npm install

若拿到别人的项目或从gethub上下载的项目第一步就是要在项目中cnpm install;下载项目所依赖的插件，然后npm run dev 运行项目

安装完成之后，我们到自己的项目中去看，会多一个node_modules文件夹，这里面就是我们所需要的依赖包资源。

安装完依赖包资源后，我们就可以运行整个项目了。