Vue-CLI

一、关于CLI

1、什么是CLI

cli：command-line interface 命令行界面cli：command-line interface 命令行界面

2、什么是Vue-CLI

Vue-CLI 是一个基于vue.js进行快速开发的完整系统，使用Vue脚手架开发的页面奖是一个完整的项目

3、Vue-CLI的优势

• 通过@vue-cli可以搭建一个交互式的项目脚手架，通过执行命令的方式下载相关的依赖

• 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。

• 一个运行时依赖 ( @vue/cli-service)，该依赖：

  • 可升级，一个命令就可以升级；
  • 基于 webpack 构建，并带有合理的默认配置；==》项目打包，编译好的项目源码直接放到服务器上使用
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。vue v-charts element-ui

• 一个丰富的官方插件集合，集成了前端生态中最好的工具。 Nodejs ，Vue Router，webpack，yarn

• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

二、Vue-CLI的使用

1、创建脚手架项目

vue init webpack myVue

huiVent

huiVent
- build-------->用来使用webpack打包使用的build以来
- config------->用来做整个项目配置的目录
- node_modules---->用来管理项目中使用的依赖
- src --------->用来书写vue的源代码
	assets    ----用来存放静态资源
	components ---用来书写vue组件
	js         ---
	router     ---配置项目中的路由
	App.vue    ---项目中根组件
	main.js    ---项目中主入口
- static       ---其他静态
- test
- .babelrc     ---将es6语法转换成es5运行
- .editorconfig---项目编辑配置
- .eslintignore
- .eslintrc.js
- .gitignore
- .postcssrc.js---使用源码相关js
- index.html
- package.json
- package-lock.json
- README.md

2、项目运行

npm start

3、Vue-CLI中项目的开发方式

注意：一切接组件 一个组件中 js代码 html代码 css代码
1、Vue-CLI开发方式是一个一个的组件，用组件分割成一个一个的功能模块，日后可以将多个组件组合到一起形成一个前端系统
2、在使用Vuel-CLI进行开发时不在书写html，而是编写的一个个组件，在打包时Vue-CLI会把组件编译成一个html文件

4、如何开发Vue-CLI

4.1 一切接组件

注意：在Vue-CLI中一切皆组件

主入口为main.js，因为一切皆组件，所以在主入口中，根页面也作为组件，即把App.vue作为组件导入

不建议对根Vue实例进行更改

<template>
  <div id="app">
    <router-view/>//到了这里就会去掉router文件夹下index.js进行当前路径需要进行加载哪些控件
  </div>
</template>
new Vue({
  el: '#app', //绑定Vue实例全局作用范围
  router,
  components: {App},//注册组件
  template: '<App/>'
})

4.2 Router

Vue-CLI分配页面是通过router来分配的，在router文件夹下的index.js文件管理页面路由，path规定了127.0.0.1:8080/这后面跟的路径，当在浏览器url地址栏输入地址后，router会自动寻找相应路径下的页面。

这里做了个尝试，当放置两个相同的路径时，默认加载前面那个路径的内容，如果想把两个组件放到一起，要用下面说的单页内引用其他组件

export default new Router({
  routes: [

    {
      path:'/',
      name:'Regist',
      component:Regist
    },
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
  ]
})

如果需要将两个或多个路径都指向一个组件内容，可以用重定向redirect

routes: [
{
  path: '/',redirect:'/home'//像这样,路径'/'和'/home'都会指向/home,显示HellowzWorld
},
{
  path:'/home',
  name: 'HelloWorld',
  component: HelloWorld
},
]

4.2.1 引用其他组件–通过路由方式

在App.vue的template中加入 表示要引用这个路由下的内容，这个只能在根路径下使用，因为其他路径下已经规定好了router

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/> 

    <Footer></Footer>
  </div>
</template>

4.2.2 单页内引用其他组件–不是通过路由方式

import引入的是对应vue中的全部，而在components中配置了之后可以使用，在组件配置过后，将要放置的组件用

这种形式把想要组织的组件放到要放的位置

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <Footer></Footer>
  </div>
</template>

<script>
  import Footer from './components/Footer'
export default {
  name: 'App',
  components: {Footer},
}
</script>

//而在Footer.vue中
<template>
    <div>
      这里是egs365 的地界，备案号是1234567654321
    </div>
</template>

<script>
    //这里并没有导出什么
</script>

<style scoped>

</style>

4.2.3 路由切换

通过链接方式切换不同路由页面

<a href="#/">主页</a>
<a href="#/regist">分页</a>

4.2.4 子路由

在一些页面下，点击功能键，会有用到子路由的情况，子路由的配置方式如下。注意add

export default new Router({
  routes: [
  {
    path: '/',redirect:'/home'
  },
  {
	//一级路由
    path:'/home',
    component: HelloWorld
  },
    {
      path:'/home',
      name:'Regist',
      component:Regist,
      children:[{
	   //add前面不需要加斜杠，因为不是一级路由
       path:'add',component:UserAdd//这里就是子路由
      }]
    },
  ]
})

使用的时候在regist的template下引用

<template>
    <div>
      <div>这个是账号注册页面</div>
      <a href="#/regist/add">添加</a>//引用功能链接
      <router-view/>//路由引用
    </div>
</template>

4.2.5 路由传参

属性绑定 :href=””+user.id

this.$route.query.id

4.2.6 监听路由变化

this.$router.push(‘/user’)

5、使用axios

• 安装npm install axios --save-dev

• 在main.js中配置

  Vue.prototype.$http=axios;//修改内部的$http为axios

• 使用axios，在需要发布异步请求的位置：this.$http.get()—因为这里已经替换为axios了

6、rap2

rap2就是一款在线模拟数据生成器，可以拦截Ajax请求，其作用在于帮助前端工程师独立于后端进行开发，实现前后端分离。

7、v-model 实现双向绑定

8、@click

Vue-CLI 后端部分

Vue-CLI项目该打包部署

1. 在项目的根目录中执行如下命令

vue run build// 打包
/**vue打包的项目必须在服务器上运行*/
打包之后当前项目有一个dist目录

打赏