Javaweb 笔记（自用） vuecli 后面及项目demo内容 菜单查询之前

十七、Vue脚手架

1、概念

1、Vue脚手架是Vue 官方提供的标准化开发工具（开发平台）

2、可以把.vue文件，转换翻译成为浏览器认识的文件

3、脚手架向下兼容，用最新的脚手架，不要用就得脚手架用新的Vue

4、官方文档

添加链接描述

5、CLI command line interface 命令行接口工具

2、安装Node

添加链接描述

1、安装注意点

1、安装左边的稳定版
2、不要勾选有一个自动更新的什么鬼东西

2、查看node.js 的版本号

node -v

3、更换淘宝镜像

添加链接描述

4、更换仓库地址

添加链接描述

3、安装CLI

1、（仅第一次执行）全局安装

npm install -g @vue/cli

如果卡住了，敲个回车

安装完成之后，关掉cmd
再开一次，输入 vue

设置了淘宝镜像也不好使 安装了那个cnmp
用cnmp替代 nmp 安装速度飞起

2、安装出错

安装vue cli 报了错误，把错误复制一份，想去搜索，结果没有复制上，想复现错误，结果安装成功了？？

3、创建项目 切记一定要切到你要创建项目的目录！！！

vue create 名字

这个名字不要和主流库重名！！

1、询问 vue 版本

先选vue2

成功标志

serve 服务 server 服务器

敲这两个命令

2、vue调试工具

添加链接描述

检查-

4、这里开始看尚马的网课，因为这里我不需要学那么细

1、使用图形界面

vue ui

1、要在文件夹目录下打开，不然会一只读取c盘下面的文件夹

2、创建项目

1、router 路由

这是个特别重要的技术
用vue写的项目都会用这个技术
不是这个

key对应value 对应关系就是路由

2、生活里的路由实现的是上网，那么编程里的路由实现的是什么呢

为了实现 SPA 应用
（single page web application）单页面应用

多页面应用不好，比如小时候，点一个链接就新开一个网页出来那种，页面之间是跳转的，跳来跳去的

3、实现了路由的网站

添加链接描述

4、实现原理

5、理解

路由

后端路由先不用掌握

3、创建项目继续

路由模式
1、历史模式 就是普通的路径
2、hash模式就是 # 带个路径

4、创建项目权限不够

5、运行

6、基于脚手架的单页面应用的 目录结构

1、node_modules
脚手架里面会用到的各种JS文件
2、public
单页面应用里面唯一的一个页面

7、平常写代码，写src里面的内容

1、main.js

Vue项目的入口文件

$mount(‘#app’)指定了监控的根标签的内容

2、引入其他js文件，就不用标签引入了

直接import 引入

3、下载vscode

下载慢的问题

添加链接描述

下载vscode插件 配置详情

添加链接描述

同步vsCode插件

添加链接描述
这里面的快捷键不好使，自己找一下
ctrl+p

若需在其他机器上DownLoad插件的话，同样，Ctrl+Shift+P打开命令框，输入sync，找到Download settings，会跳转到Github的Token编辑界面，点Edit，regenerate token，保存新生成的token，在vscode命令框中输入此Token，回车，再输入之前的Gist ID，即可同步插件和设置

我的token和 gist ID 保存在百度云了

4、vscode 配置 git

添加链接描述

提交到 gitee 添加链接描述

5、精简组件，把没用的东西删一下

1、

2、

这个应该是APP。vue里面的文件

6、.vue 结构

1、.vue 结构标签