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样式

Vue Cli 开发方式是在项目中开发一个组件对应一个业务功能模块,可以将多个组件组合到一起形成一个前端系统使用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.vue

三 在脚手架中使用axios 安装axios 安装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. h t t p . g e t ( " u r l " ) . t h e n ( ( r e s ) = > ) t h i s . http.get("url").then((res)=>{}) 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脚手架项目打包和部署 项目的根目录下执行如下命令:
vue run build
如果是在webstorm ide环境下可以直接使用nodejs中自带的可视化 *** 作
注意 : vue脚手架打包的项目必须在服务器上运行不可以直接双击–node.js打包之后项目的目录变化
打包之后出现dist目录
dist目录是Vue脚手架项目生产目录或者可以说是直接部署目录发布
将dist目录复制到服务器上的webapp目录下即可