Vue-CLI

一 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脚手架项目打包和部署

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