一、组件基础

格式1:

<div id="id的名字">
	<组件的名字></组件的名字>
</div>
<script type="text/javascript">
//把这个组件加载到VUE容器中
	Vue.component('组件的名字',{
	//第二个参数的形式，都是{data:function(){xxx},template}
	//其中，data是可选的，template是必填的
		data:function  () {
			return{
				//return也是必须写的，哪怕里面啥都没有
				//这里可以用来写某些值，这样就可以在一个网页运行两个同样的VUE组件也不冲突
			}
		},
		template:'这里写组件的元素，就把这里的东西映射到上面body的div中'
	});
	//这里还是要new一个VUE的，因为上面只是把东西加在容器中，还没有创建VUE
	var vm=new Vue({
		el:'#id的名字',
		data:{
			
		}
	});
</script>

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
		<!--d调用两个VUE组件，名字自己起的-->
			<button-counter></button-counter>
			<button-counter></button-counter>
		</div>
		<script type="text/javascript">
			//第一个参数是名字，第二个template必填，data可选
			Vue.component('button-counter',{
				props:['title'],
				data:function  () {
					return{
						//这里就，默认有一个count变量，起始为0
						//这里可以理解为data:{count:0},看起来是在return里面怪怪的，不要管他
						count:0
					}
				},
				//这里就写元素了，这个组件就只有一个button，template必填
				template:'<button v-on:click="add">点了我{{count}}次</button>',
				//在这里面写方法，写法和平时的一样
				methods:{
					add:function  () {
						this.count++;
					}
				}
			});
			//创建VUE对象
			var vm=new Vue({
				el:'#app',
				data:{
					
				}
			});
		</script>
	</body>
</html>

vuepress1 组件_vue.js

格式2：

<div id="id的名字">
	<test></test>
</div>
<script type="text/javascript">
	var app=new Vue({
		el:"#id的名字",
		data:{
			//data数据
		},
		methods:{
			//方法
		},
		//这里开始写模板
		components:{
			//模板的名字，然后里面是各个属性
			test:{
				template:'这里写组件的元素，就把这里的东西映射到上面body的div中',
				//props可选
				props:['标题'],
				//data可选，data里面return相当于data:{count:0}
				data:function  () {
					return{
						count:0
					}
				},
				//方法
				methods:{
					//方法
				}
			}
		}
	});
</script>

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<test></test>
			<test></test>
		</div>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					//data数据
				},
				methods:{
					//方法
				},
				//这里开始写模板
				components:{
					//模板的名字，然后里面是各个属性
					test:{
						template:'<button v-on:click="add">点了我{{count}}次</button>',
						props:['title'],
						data:function  () {
							return{
								count:0
							}
						},
						methods:{
							add:function  () {
								this.count++;
							}
						}
					}
				}
			});
		</script>
	</body>
</html>

vuepress1 组件_vue_02

二、单文件使用

1、环境配置(又长又臭)

VUE官方教程 按照官网的说法，要下载npm，然后在里面安装vue-cli和webpack

1）下载node.js

node.js官网下载，自带npm 下好后：

vuepress1 组件_vuepress1 组件_03

2）下载vue-cli

然后下载VUE-cli

vuepress1 组件_html_04


最后查看版本vue --version

2、创建项目

先自己找个地方创个目录，比如我是D:\网页\HBuilder\VUE测试项目

vuepress1 组件_vue.js_05


vue create testapp创建项目，第一次进去y然后继续

vuepress1 组件_Vue_06

  • 第一个就是默认的，第二个是手动的，我们选手动

vuepress1 组件_vuepress1 组件_07

  • 控制选择确定与取消，回车就下一步了
  • Babel，编译，必带的
  • TypeScript:如果用的不是JS就选
  • Proxxxx：大项目的
  • Router：路由
  • Vuex：状态管理
  • CSS xxx：css处理器
  • Linter：代码格式化规范
  • unit Testing：单元测试
  • 不知道

vuepress1 组件_vuepress1 组件_08

  • 配置文件分开来写还是在一个文件里面写，分开就第一个，在一个文件写就第二个。这里选集合在一起

vuepress1 组件_Vue_09


vuepress1 组件_html_10

  • 刚才做的配置是否想要保存一下，下次就用这个配置就行

vuepress1 组件_Vue_11

  • 他就自己生成了，等很久

vuepress1 组件_html_12


创建成功了，打开文件看看

vuepress1 组件_Vue_13


vuepress1 组件_Vue_14

  • 其他的不用管，都是一堆配置
  • src里面，就是我们写代码的东西，把东西都写在.vue文件，然后node.js通过解析，把vue文件转化为html文件，让浏览器识别

三、运行项目

vuepress1 组件_vue.js_15

这个图，也告诉我们，先进入testapp，再npm run serve，那么我们就来吧

vuepress1 组件_vuepress1 组件_16


好了，我们localhost:8080打开

vuepress1 组件_vuepress1 组件_17

1、看里面的代码

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
  • 可以看到，是3段式的，template、script、style
  • export default：name这个组件的名字，props，里面的每一个参数都有{}，msg:String这个msg参数类型为String。后面还可以加default，默认值为什么

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
  • import HelloWorld from './components/HelloWorld.vue'，导入什么组件的名字，在哪里导入
  • export default：这个VUE文件叫啥，components要用到哪些组件

2、流程

流程呢，就是运行D:\网页\HBuilder\VUE测试项目\testapp\public\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

里面有个idv，id为app，哪里找？

在D:\网页\HBuilder\VUE测试项目\testapp\src\main.js

vuepress1 组件_vuepress1 组件_18


然后到了App.vue

vuepress1 组件_vue.js_19


到了HelloWorld.vue

vuepress1 组件_Vue_20


所以流程就是，先把小部分的做好，放到App.vue中，然后main.js再.$mount('#app')。最后，html文件使用<div id="app"></div>，加载所有东西

3、打包

你直接打开那个index.html文件，浏览器是不会识别的，因为里面又VUE的一堆环境什么的

在cmd中使用命令打包生成html

进入到D:\网页\HBuilder\VUE测试项目\testapp，输入npm run build

vuepress1 组件_vuepress1 组件_21


生成了文件，打开看看

vuepress1 组件_vuepress1 组件_22

里面的代码全是经过压缩的

但是！！！！你双击还是不能运行！！！直接空白

双击显示错误提示

vuepress1 组件_vuepress1 组件_23


构建文件务必放在一个HTTP服务器。直接打开index.html文件将不工作。

所以，就是当你用spring boot的时候，放在正确的位置，就可以看了，至于正确的位置是哪里，还在研究。

四、图片化创建vue项目

就进入CMD，挑个好路径，输入vue ui

vuepress1 组件_vue_24


vuepress1 组件_vue.js_25


图片化就舒服了很多