总结一下笔记1的内容
- 需要操作的文件夹
-src文件夹
--App.vue：html+js+css组成，可以应用其他子vue块（vue块==组件），主组件
--main.js：可以引入ElementUI组件库
--components：子组件（子vue块）存储位置
--assets：静态资源（图片或者文字）存储位置
- vue简单总结：一个网页可以由很多个子vue组件组成，一整个网页又是一个大Vue，vue又由html+js+css组成，各个vue相互联系又各自独立。
ps：还有其他后期需要的重要文件夹，之后会边开发边记录。
在main.js中引入ElementUI组件库
npm 安装
右键项目->点击" 使用命令行窗口打开所在目录 ":
在终端中输入" npm i element-ui -S "。
npm i element-ui -S
完整引入Element
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
使用ElementUI组件库
举个例子：
（1）在components中创建vue文件，名为test1.vue.
（2）在test1.vue中使用ElementUI组件.
- 打开组件 | Element页面，假如我们想要引入elementUI组件库中的下拉菜单select选择器。
- 复制代码：
- test1.vue:
<template>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
}
}
}
</script>
<style>
</style>
- 在App.vue中引入test1.vue并使用它：
App.vue：
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<Test1/> #3-像html元素（例如div）一样使用它
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import Test1 from './components/test1.vue' #1-引入test1.vue,并取名字为Test1
export default {
name: 'app',
components: {
HelloWorld,
Test1 #2-在components中配置好Test1
}
}
</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>
（3） 运行项目，查看效果
右键项目->点击" 使用命令行窗口打开所在目录 "->输入" npm run serve "
npm run serve
（4）在浏览器中打开"http://localhost:8080"：
对照着代码看：
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png"> #一张img图片
<HelloWorld msg="Welcome to Your Vue.js App"/>#一个helloworld子组件
<Test1/>#一个test1子组件
</div>
</template>
这样，我们就把elementui的select组件引用进去啦！！！
我们可以看到，输入" localhost:8080 ",显示的便是App.vue组件，我们一般习惯把它称为主组件；而在App.vue里头，引入了其他子组件（helloworld组件和我们自己创建的test1组件）。
为什么输入该网址显示的就是App.vue呢？
之前我们说到，main.js是vue实例项目的入口文件。在该入口文件中，规定了App.vue为入口文件的主组件。换句话说，当你运行该项目的时候，会先一句一句的读取并执行main.js文件，在其中，所有vue文件中最先被执行的便是App.vue。
main.js:
import Vue from 'vue'
import App from './App.vue' #规定App.vue为入口文件的主组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({ #创建vue实例
render: h => h(App),
}).$mount('#app')
参考：
前端 - Vue 应用里 main.js 的作用 - Jerry Wang的SAP技术专栏 - SegmentFault 思否
