新手上手vue 第一个Hello（大佬勿喷）
哈哈，今天分享下，我的第一个vue项目。
首先当我们搭建好环境（nodejs什么的）编程工具也配置好，我是用vscode。
当我们创建好vue项目后就有会出现这几个文件夹。一般打包vue的话也就大概打包这几个，不过node_modules这个太大不建议打包。
一般都是在其他文件夹拉好后，直接在终端：npm install 就OK了。
（注）在src中
1 main.js文件
import Vue from 'vue'
// 相对路径引入的App.vue文件
import App from './App.vue'
// 这行命令的作用是给生产环境配置的提示消息，如果为true或者默认不配置，会有相关提示语
Vue.config.productionTip = false
new Vue({
// 渲染节点
render: h => h(App),
// 挂载函数，内部#app是vue的根节点
}).$mount('#app')
2 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">
<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>
noscript标签的作用是当script标签加载不出来或者抛出错误的时候替换内容，目的是在浏览器中提供友好提示
<div id="app"></div>是整个vue项目的根标签，vue需要挂载的标签
3 App.vue文件
App.vue文件是整个项目的根组件，项目中所有的页面切换页面显示都是在这个组件基础上渲染的
我们将整个App.vue文件清空后发现
<template>
<div id="app">
</div>
</template>
<script>
export default {
components: {
}
}
</script>
<style>
上面的结构是.vue文件的基础结构
<template>元素的作用是搭建vue文件的结构
<script>元素的作用是对当前文件逻辑进行交互
<style>元素的作用是对当前文件的样式进行修饰
我们之前开发中.js文件只有逻辑.css文件只有样式.html文件只有结构，但是.vue的组建就是将视图和逻辑进行了一个整合。
红色里的是放子组件的，蓝色是父组件。如果要在父组件里体现父组件如下输入：
在App.vue的script：
import 你取的名 from './components/你取的名.vue'
在export default 里：
// 注册组件
components:{
你取的名字
},
总结使用组件三步走
1) 创建vue文件
2) 在要渲染的地方引入该组件
3) 注册该组件
要显示的话在template 写个标签<你取的名></你取的名字>
浙公网安备 33010602011771号