使用Vue脚手架

使用vue脚手架之前安装Node.js服务器

Tomcat服务器（属于后端服务器，运行Java代码 默认端口号8080，端口号不可延申）

第一步：安装Node.js服务器；（属于是前端服务器，运行前端代码，默认端口号8080                 默认端口号被占用时，端口号可延申 例如：8081、8082等）；

注意：两个服务器同时使用时，先启动Tomcat在启动Node,因为Node端口号可以延申，而Tomcat端口号不会延申，容易被占用；

安装网址：Node.js (nodejs.org)    安装Node,双击打开，一直点击下一步，知道软件运行完成，点击关闭；

第一步：测试是否安装成功和查看Node版本号；

在黑窗口输入两个指令：

node -v和npm -v

第二步：全局安装：npm i vue-cli -g

 

第三步：安装webpack

npm i webpack -g

npm i webpack-cli -g

 

第四步：创建项目

创建项目之前在盘里创建一个文件夹

切换到刚刚创建文件夹的目录

cd/d C:\vueWork

vue create myvue(项目的名字) 

如果出现这个   就是vue-cli 的版本和我们创建项目的版本不一致

修改一下版本

卸载原来的不符合使用的vue的版本并安装合适的版本

（使用空格键点击括号  取消/选中）

输入模板的名字：test(随便起)

根据以上提示完成最后的安装

cd myvue

npm run serve 启动Node服务

完成安装之后会弹出；

点击允许，通过http://localhost:8080   访问Vue

两个网址，本地访问通过第一个网址；通过他人电脑访问使用第二个网址；

显示这个页面，代表vue脚手架安装完成；

整个的项目结构

Main.js是vue项目的入口； （在目录src下找）；

App.vue是项目的主组件；（一切的组件都是一App.vue为核心的）；

package.json 类似于pom.xml文件都是依赖jar包；

路由：

定义路由的时候，path的路径一定是唯一的；

如果写name,对应的值也得是唯一的

<router-view/> 容器，作用：存放组件内容的        一般存放到父容器里面

App.vue是所有组件的父类  ;

在vue中 @代表src

写一个组件配置路径：（建议放在src下views下/src下components下）

组件里面

<template>

标签只能有一个根标签；

注意：错误写法多个跟标签

第一步，写组件

第二步：在router下index.js配置路径

第三步：访问

启动命令serve可以换成dev