一 Vue CLI 项目介绍

1.创建第一个vue脚手架项目

vue init webpack 项目名

项目目录结构

fist-vue            ------------>项目名
    build           ------------>使用webpack打包使用build依赖
    config          ------------>整个项目配置目录
    node_modules    ------------>管理项目中使用依赖
    src             ------------>书写vue的源代码[重点]
        assets      ------------>存放静态资源[重点]
        components  ------------>书写Vue组件[重点]
        router      ------------>书写Vue组件[重点]
        App.vue     ------------>项目中根组件[重点]
        main.js     ------------>项目中主入口[重点]
    static          ------------>其它静态
    test            ------------>
    .babelrc        ------------>
    .editorconfig   ------------>项目编辑配置
    .eslintignore   ------------>
    .eslintrc.js    ------------>
    .gitignore      ------------>git版本控制忽略文件
    .postcssrc.js   ------------>源码相关js
    index.html      ------------>项目主页
    package.json    ------------>类似与pom. xml依赖管理jquery 不建议手动修改
    package-lock.json   -------->对package.json加锁
    README.md       ------------>项目说明文件

3.如何在运行

在项目的根目录中执行
npm strat 运行系统

4.如何访问项目

http://localhost:8081

5.Vue Cli中项目开发方式

注意 : 一切皆组件 一个组件中 js代码 html代码 css样式

1. Vue Cli 开发方式是在项目中开发一个组件对应一个业务功能模块,可以将多个组件组合到一起形成一个前端系统
2. 使用Vue Cli进行开发时不再书写html文件,编写的是一个组件(.vue后缀结尾的文件),打包时Vue Cli会将组件编译运行的html文件
   

   二 开发Vue脚手架

   注意 : 一切皆组件
   Vue.vue

import Vue from 'vue'     //在页面中引入vue.js
import App from './App'       //引入自定义组件
import router from './router'//引入vue 的route.js
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({       //Vue全局实例
  el: '#app', //绑定Vue实例全局作用范围
  router,       //注册路由对象,改路由在index.js中修改
  components: { App },//注册App组件
  template: '<App/>'
})

App.vue

<template>
  <div id="app">
    欢迎 : {{msg}}
    <br>
    网址 : {{aurl}}
        <router-view/>    //展示路由
  </div>
</template>
<script>
export default { // es6暴露当前组件对象
  name: 'App',
  data () {
    return {
      msg: '唐僧洗头艹飘柔',
      aurl: 'https://blog.odliken.cn'
    }
  },
  methods: {}, // 方法
  components: {}, // 其他自组件
  created () {} // 生命周期
}
</script>
<style>
</style>

三 在脚手架中使用axios

安装axios

1. 安装axios

npm insatll axios --save-dev

2. 在main.js中引入axios

import axios from 'axios'
Vue.prototype.$http = axios // 修改内部的$http为axios $http.get("") .post()

3. 使用axios
   在需要发送异步请求的位置:
   this.$http.get("url").then((res)=>{})
   this.$http.post("url").then((res)=>{})

   vue中的路径监听

   watch : {
   $route : {
   handler : function (val,oldVal) {
     console.log(val);
     if (val.path=='路径名'){
       this.findAll();
     }
   }
   }
   }
   this.$router.push("url")  // vue切换路由

   三 Vue CLI脚手架项目打包和部署

4. 项目的根目录下执行如下命令:
   vue run build
   如果是在webstorm ide环境下可以直接使用nodejs中自带的可视化操作
   注意 : vue脚手架打包的项目必须在服务器上运行不可以直接双击--node.js
5. 打包之后项目的目录变化
   打包之后出现dist目录
   dist目录是Vue脚手架项目生产目录或者可以说是直接部署目录
6. 发布
   将dist目录复制到服务器上的webapp目录下即可