vue.js课程心得体会

一，vscode是什么？

VSCode是一个免费的、开源的代码编辑器，由微软公司开发和维护。它支持多种编程语言和框架，提供了丰富的功能和扩展性，使开发者可以高效地编写、编辑和调试代码。VSCode可以运行在Windows、Mac和Linux等操作系统上，是一款非常受欢迎的代码编辑器。

二，vue.js是什么？

Vue.js是一款构建用户界面的渐进式框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建，是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web应用的场景，并且几乎不需要手动优化，并且Vue完全有能力处理大规模的应用。

vscode是vue.js主要的代码编辑器，这不是重点，而我们今天的重点在于vue.js脚手架的安装和使用

首先，我们要明白vue.js脚手架是什么？

Vue.js脚手架指的是Vue CLI（Command Line Interface），是由Vue.js官方提供的一套用于快速搭建Vue.js项目的命令行工具。

Vue CLI主要的功能是帮助开发者创建和管理Vue.js项目，提供了一个交互式的项目创建界面，可以通过命令行快速初始化一个Vue项目，并且支持自定义配置。

以下是脚手架的安装过程

以及使用过程：

使用Vue.js脚手架的过程可以分为以下几个步骤：

安装Node.js：首先，你需要在你的计算机上安装Node.js。你可以从Node.js的官方网站下载并安装适合你操作系统的版本。
安装Vue CLI：Vue CLI是Vue.js的命令行工具，它可以帮助你快速创建和管理Vue.js项目。你可以通过以下命令安装Vue CLI：
npm install -g @vue/cli

创建项目：使用Vue CLI创建新的Vue.js项目。你可以通过以下命令创建项目：
js
vue create <project-name>
其中<project-name>是你想要为你的项目命名的名称。

运行项目：一旦项目创建成功，你可以通过以下命令在本地运行项目：
arduino
npm run serve（jsconfig.json、package-lock.json、package.json三个中任选一个即可，右键在集成终端打开，输入以上代码按回车键，按Ctrl鼠标点击链接即可打开）

出现以下页面说明启动成功【注意，如果以上三个打开不是项目根目录，要在vue.config.js中打开】
这将在你的本地计算机上启动一个开发服务器，并在浏览器中打开一个新页面，显示你的Vue.js应用程序。

开发项目：一旦你的项目运行起来，你就可以开始在项目的src目录下编写你的Vue.js代码了。你可以使用.vue文件来编写单文件组件，或者在单独的JavaScript或CSS文件中编写代码。
构建项目：当你完成了你的Vue.js应用程序的开发后，你可以通过以下命令将你的应用程序构建为生产就绪的代码：
shell
npm run build

这将生成一个dist目录，其中包含构建后的代码，你可以将此代码部署到你的服务器上。

以上就是使用Vue.js脚手架的基本过程。当然，还有许多其他的选项和插件可以用来扩展和定制你的Vue.js项目，你可以根据需要查阅Vue CLI的文档来了解更多信息。

这是我们目前完成的项目

页面代码如下：

这是页面左边代码

这是轮播图代码

这是路由的传参

css部分，使用lang语句可嵌套

【注：每添加一列（如li标签）都要在index.js上写上路由】

vue.js还有一个重要的元素：组件

vue组件的优势

我们在写一个页面的时候，时长会碰到一种样式，或者一块菜单栏之类的，它们在很多的页面都是一模一样的，如果我们每一个页面都写一遍的话，会造成巨大的浪费时间和精力，如果我们全部复制黏贴过去的话，后期的修改又会十分的痛苦，有没有办法能让我们将这一块通用的样式/菜单给封装起来，等到我们使用的时候，直接引入进来，就能正常的使用了，并且我们在维护的时候，只需要修改一个文件，就能完成整体的修改。组件这个概念就应运而生了

组件具有的优势是：

① 提高开发效率

② 方便重复使用

③ 简化调试步骤

④ 提升整个项目的可维护性

组件官网：Element - The world's most popular Vue UI framework

以下是组件的使用：