vue脚手架创建项目

菜...

已于 2024-01-02 14:58:52 修改

阅读量1.5k

点赞数 47

文章标签： vue.js

于 2023-12-31 23:03:04 首次发布

本文链接：https://blog.csdn.net/weixin_74789124/article/details/135318587

版权

Vue.js的简介

Vue.js是一种流行的前端JavaScript框架。它被设计用于构建用户界面，并且可以通过组件化的方式来管理和重用代码。Vue.js具有简洁的语法和灵活的架构，使得开发者可以快速构建交互性强的单页面应用程序。它还具有响应式的数据绑定和虚拟DOM的功能，使得应用程序能够高效地更新和渲染视图。Vue.js也有一个强大的生态系统，包括众多的插件和工具，使得开发过程更加便捷。

Vue.js的基本工作原理

Vue.js 是基于 MVVM 框架的，其中 View 层指的是视图部分，即HTML 文档的 DOM 元素，负责视图的处理；Model 层指的是数据部分，主要负责业务数据存取；ViewModel 层是 Vue.js 的核心，是连接视图与数据的数据模型，负责监听 Model 或者View 的修改，它实质上是一个 Vue.js 实例。Vue.js 的目标是通过尽可能简单的 API实现响应的数据绑定和组合的视图组件。

1.先安装Node.js

https://nodejs.org/en/download

进入官网的下载地址，选择跟自己电脑版本相同的

或者

开始安装

测试有没有安装成功，可以点击快捷键win＋R，在输入cmd

然后输入node -v或node --version可以查看版本

成功显示表明安装成功！！！

2.下载vue.js_devtools

vue2项目调试插件，下载vue.js_devtools，使用此插件下载，解压，把.crx结尾的文件拖入浏览器的扩展程序中即可使用。

链接: https://pan.baidu.com/s/1cyXmsTvtcG85CFj-srKDig?pwd=1003

提取码: 1003 复制这段内容后打开百度网盘手机App，操作更方便哦

Chrome 开发者工具扩展，用于调试 Vue.js 应用。

Vue Devtools 是一个专为 Vue.js 开发者设计的浏览器扩展。它提供了一系列强大的功能，帮助开发者更容易地调试和优化他们的 Vue 应用程序。以下是 Vue Devtools 的主要特点和功能：

组件树查看：允许用户查看完整的 Vue 组件层次结构，以及每个组件的属性、数据、计算属性和插槽。
实时编辑：在 Devtools 中直接修改组件的数据，可以立即在应用中看到变化。
事件追踪：查看组件之间的事件传递，帮助理解和调试组件间的交互。
Vuex 集成：如果应用使用了 Vuex，可以在 Devtools 中查看、追踪和编辑应用的状态。
性能分析：提供组件渲染的性能数据，帮助找到和解决性能瓶颈。
插件支持：可以集成第三方 Vue 插件，为开发者提供更多的调试工具。
定制设置：允许开发者根据自己的喜好调整 Devtools 的外观和行为。

这样使用：

3.vue cli 脚手架的安装

使用npm方式安装脚手架

npm install -g @vue/cli

vue cli安装成功之后，使用vue -V命令查看版本号，如果成功出现版本号即代表安装成功，我们就可以通过Vue Cli脚手架来创建项目了。

4.创建项目

先找好要在哪里建项目的目录

vue create world “world”是项目名，可以自己随便取一个

每一个选项的作用说明：

(1)Babel: JavaScript 语法编译器。

(2)TypeScript: TypeScript 是一个 JavaScript(后缀.js)的超集(后s)包含并扩展了JavaScript 的语法，需要被编译输出为 JavaScript 在浏览器运行。

(3)Progressive Web App (PWA)Support: 渐进式 Web 应用程序。

(4)Router: vue-router( vue 路由)。

(5)Vuex: vue 的状态管理模式。

(6)CSS Pre-processors: CSS 预处理器(如: less、sass)。

(7)Linter/Formatter: 代码风格检查和格式化(如:ESlint)。

(8)Unit Testing: 单元测试(unit tests)。

(9)E2E Testing:端对端(end to end)测试。

输入以下两个：

cd world

npm run serve

这样就好啦！！！

5.项目的目录结构说明

目录/文件	说明
node_modules	npm 加载的项目依赖模块
public	public静态文件夹 index.html: 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
babel.config.js	babel语法编译文件
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式
vue.config.js	配置文件