Vue3的环境配置、项目创建以及Vue基础的学习

Vue3的环境配置

Vue官网

终端

Linux和Mac上用自带的终端。
Windows上推荐使用powershell或者cmd。GitBash会有一些不兼容。

安装Nodejs

安装地址
LTS意味着稳定版本

安装@Vue/cli

打开一个终端，我是用的Wondows电脑，这里我用powershell，然后执行npm i -g @vue/cli命令

启动Vue自带的图形化界面

执行vue ui，启动图形化界面。

Vue3的项目创建

创建项目以及各栏的功能作用

在Vue项目管理器中点击创建vue项目的时候加载很慢的解决方法

不以管理员的身份执行Vue ui，这样新创建项目的时候非常快。

选择Vue3

插件栏

添加一些必要的插件

• router
• vuex

依赖栏

添加一些必要的依赖，操作和上述类似。

• BootStrap

• 添加@popperjs/core
• 添加jquery

任务栏

点击运行，查看输出，点击链接，出现如下界面，则项目创建成功！

用vscode打开项目

打开项目所在文件夹。

Vue基础的学习

Vue的结构

• views文件夹：用来写各种页面
• router文件夹：存放路由，就是网址存放的页面
• components文件夹：用来存放各种组件
• main.js：入口

router的详细理解

初始状态包含连个路由，一个是根目录，一个是

两个路由

如果不要链接中出现#，只需要将router包下面的index.js文件中涉及到的两个createWebHashHistory改为createWebHistory。

vue的概念

（1）每一个.vue文件都由三个部分组成（一个整体）,相较于传统分散的三个模块有所变化

• html
• js
• css
  • 特性<style><style>中添加scoped变为<style scoped><style>这样不同组件之间的css选择器就不会相互影响了。

（2）一个页面会有不同部分，每一个部分都可以用一个单独的组件来实现。引入一个组件的方式如下：

后端渲染和前端渲染的理解

• 后端渲染：每打开一个页面，服务器发送请求并返回回来
• 前端渲染：只有在第一次打开（无论在什么页面），服务器将所有元素返回，同时打包在js文件中，当打开第二个、第三个页面用返回的js文件直接将页面渲染出来。