笔记1：Vue+ElementUI快速开发

爱追剧的小mo
58 阅读3分钟

准备

下载hbuilder+node.js ---参考一步一步用hbuilder配置nodesjs环境做vue.js开发_vue+node+windows+hbuilder-CSDN博客

创建vue项目

1）进入hbuilder界面，点击 文件->新建->项目 进入以下界面：

image.png

等待一段时间---ing

image.png

显示以上界面即创建成功。

2）DomoV1目录下，src文件重要程度 ⭐⭐⭐⭐⭐

image.png

⭐ 什么叫做Vue文件

记住一点，网页能看见的就是很多个Vue，就拿Hbuilder这个界面来说明一下，

image.png

绿色框框就是一个个Vue，绿色框框全部拼接组装成一块也是一个Vue（大Vue中还可以分成很多个小Vue），当然还有更麻烦的分法，也可以说一个按钮就是一个Vue，取决于如何（省事）分块。

⭐ 那么，Vue文件的结构又是什么？

你看上一张图的某一个Vue块，它有内容（html） 也有样式（css） 个别的还有动态交互（js，比如点击效果）

没错，看到这里，你应该就很清楚 Vue 到底是什么了吧！

一个Vue就是由html+css+js组成的。

⭐ 终于轮到Vue中之王---App.vue---闪亮登场！！！

image.png

请看以上界面，它把html写在-template-里头，把js写在-script-里头，把css写在-style-里头。

接下来，请耐心的听我讲解一下以上这三个模块（template-script-style）。

  • 第一部分：-template-
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

上面放置了什么内容呢？

一句话总结就是，一个容器div中放置了一张图片img和一个Vue块（叫做helloWorld）。

⭐先看下这个项目运行起来页面是怎么样的？（重点：运行项目步骤）

法1：点击项目->右键->找到" 外部命令 "->点击" npm run serve "。

2.png 法2：点击"运行"->选择" 运行到浏览器 "->点击你本地电脑上有的浏览器即可。

image.png

法3（特别推荐）：右键项目->点击" 使用命令行窗口打开所在目录 "。

1.png

输入" npm run serve "。

image.png

等待-ing

image.png

点击"http://localhost:8080" 或者直接打开浏览器输入这个网址即可显示页面。

image.png

为什么把App.vue称为vue中之王呢...它特别在：1-直接运行浏览器显示的是它；2-它的位置又比其他vue块的位置更上一级（在src下）；3-main.js中import了它。

而main.js又是项目的入口文件，参考---vue项目文件中的 main.js_vue main.js-CSDN博客

回到上一颗星讲解-template-内容：

看到以上运行结果，我们可以看到，App.Vue中放置着一张图片和一个helloworld.vue块。

  • 第二部分：-script-
<script>
import HelloWorld from './components/HelloWorld.vue'

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

上面放置了什么内容呢？

一句话总结，便是引进了一个helloworld.vue，该vue块项目位置在'./components/HelloWorld.vue'，并且为该vue块取了一个名字，叫做HelloWorld。

所以，要在App.vue中引用其他vue，就需要在-scripts-中import-vue，才能在-template-中像html元素（比如div）一样使用它。

  • 第三部分：-style-
<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>

美化内容。

⭐src除了App.vue之外，还有main.js文件。

import Vue from 'vue' #创建Vue应用实例
import App from './App.vue' #指定Vue应用实例的根组件为App.vue,并取了个名字叫做App

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app') #渲染到`#app`的DOM元素上（回看App.vue中div元素id为app）

这里只说明，在main.js中，可以引入组件库（这里引入ElementUI），便可应用组件库到项目中。

avatar
文章
阅读
粉丝