Vue ----我的第一个脚手架SAP程序

先决条件 ：VsCode Node.js Vue Cli Chrome

一：导语

1.在之前的入门开发中，很多小伙伴都用到的是 直接使用Script标签引入完整的Vue.js

    1.在这个js包中，大量的Vue所需的类库 ，当然这样作是为了让我们更好的入门Vue降低我们的学习成本；

    2.在实际的开发环境中如何开发？如何使用Vue开发一个单页面应用 

2.Vue Cli    

1.Vue cli 提供了 对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持。其中你需要了解的是 Babel：通过Babel 让Es6 Es7的语法兼容不同的浏览器； ESLint：对ES6 ES7 的语法进行纠错；

2.快速帮助我们搭建一个Vue的开发环境 当然在Cli中 使用创建Vue工程时，cli提供了很多配置可供我们按需选择；

3.他集成了前端强大的构建工具 Webpack 

3.使用Cli创建一个Vue工程

1.下载Node.js 并安装（建议下载最新LTS版）安装npm

2.安装Vue cli ： npm install -g

3.创建一个项目  vue create 项目名称

4.选择版本

 

 5.创建完成 按提示输入 cd 项目名文件    npm run server

6.访问 localhost:8081 或者局域网访问： 192.168.0.104：8081 手机 也行

 

 7.创建完成

4.通过Cli创建的Vue 和我们学习时写的Demo有何不一样？

1.使用Vscode打开项目

首先我们先看到 目录下的 mian.js

 

 

 Main.js是整个项目的入口，首先引入了 Vue App根组件 等 新建了Vue实例 通过render根组件渲染到页面上，同时把路由挂载在实例上

2.若想让打开vue应用时不显示预设内容你只需要 删除在App.vue组件中的内容 

 5.在Vue工程中使用路由

1.创建一个登陆页面  style加上 scope 表面当前的样式只为他服务 不会污染别的组件

 2.定义登陆组件完成之后 我们需要在router.js中定义规则 让login渲染到App.vue 根组件中 并在跟组件中添加 router-view标签 让路由规则过来的组件再此渲染

 

 

 新建规则 完成 测试

 

 

 成功；

6：完成登陆页面