【融职培训】Web前端学习 第7章 Vue基础教程2 建立Vue项目

1、使用vue/cli建立Vue项目

在第七章咱们已经介绍了如何使用npm命令全局安装node包，本节咱们须要安装一个名为@vue/cli的包来建立咱们的vue项目，安装代码以下所示：

npm install -g @vue/cli

安装完成以后，在命令行能够使用Vue命令命令建立一个vue项目，具体命令以下所示

vue create hello

安装过程须要链接国外服务器下载项目模板和依赖包，若是网速过慢能够在配套示例代码中下载项目模板，而后使用cnpm下载依赖包。

建立完成以后，让命令行工具进入到hello目录中，而后执行下面的命令启动项目：

npm run serve

项目启动后，会在8080端口开启一个服务器，咱们直接访问http://localhost:8080/，就能够访问刚才建立的这个Vue项目了，若是成功访问会看到以下图所示的页面。

2、项目目录结构

建立的项目目录结构以下所示：

├─hello
│    ├─node_modules
│    ├─public
│    │   ├─favicon.ico
│    │   ├─index.html
│    ├─src
│    │   └─assets
│    │   │   └─logo.png
│    │   └─components
│    │   │   └─HelloWorld.vue
│    │   └─App.vue
│    │   └─main.js
│    ├─babel.config.js
│    ├─package.json
│    ├─README.md

重要文件介绍

• node_modules：存放项目依赖包
• public：存放静态文件(例如图片等)
• src：项目源文件，后续开发几乎都在这个目录下进行
  • main.js为项目的入口文件
  • App.vue是单文件组

组件化开发概述

以vue为后缀的文件是vue的单文件组件，咱们在开发vue应用的过程当中，主要任务就是去编写这些以vue为后缀的文件。

最近几年前端开发很是盛行的开发方式是组件化开发，要想理解什么是组件化开发，须要先理解什么是组件。

你们能够把组件理解成一个，能够自定义的，有更强大功能的标签。

而咱们开发web项目，其实就是在编写和组装这些组件，例如融职教育的官网，能够将整个应用拆分红header，slider等等内容。

这样用组件拆分的方式开发项目，思路清晰，简洁高效，并且还能够复用相同的组件。

程序是如何运行的？

import和export是ES2015的语法，相似于node的require和module.export

• import:引入第三方模块，能够取代require
• export:暴露接口，让其余模块使用当前模块

1 import Vue from 'vue'  
2 import App from './App.vue'
3 Vue.config.productionTip = false //开发过程当中的错误提示
4 new Vue({
5   render: h => h(App),
6 }).$mount('#app')

render方法是一个ES6语法的简写，若是完整的写法能够看作以下语法

1 new Vue({
2   render (createElement) {
3     return createElement(App);
4   }
5 }).$mount('#app')

render方法中的createElement能够根据组件生成DOM节点，这样，就成功地将单文件组件App.vue加载到index.html中了。

3、改写App.vue文件

咱们删除App.vue的默认代码，只留下一个组件的估价，代码以下所示：

<template>
     <!-- 组件的应用 -->
</template>

<script>
    //  导入其余组件，定义该组件的数据、方法等
</script>

<style>
     /* 组件的样式  */
</style>

• template标签中添加的是html代码，template内部全部内容都要包含在一个标签以内。
• script标签中添加的是JavaScript代码
• style标签中添加的是CSS样式。

默认状况下，vscode编辑器不能高亮显示.vue文件，须要安装vetur插件。

了解了基本语法以后，咱们来编写第一个组件，示例代码以下所示：

1 <template>
 2   <div>
 3     <h1>{

  
  
   
   
            
   

  {message}}</h1>
 4   </div>
 5 </template>
 6 
 7 <script>
 8 export default {
 9   data(){
10     return {
11       message:"hello vue"
12     }
13   }
14 }
15 </script>

上面的案例是第一节讲过的一个案例，将data中的数据在文本中显示，可是与此前的代码有所区别：

1. 由于是单文件组件，因此须要在script中，用模块化的语法export default将组件的示例暴露给外部。这样组件文件才能被使用。
2. data属性与以前相比，变成了一个方法，而data中的数据是data方法的返回值。

初学者很容易将data的用法写错，这里须要十分注意。其他的写法，例如属性绑定，事件绑定，与此前学习过的语法没有区别。

绑定属性和事件的方法以下所示：

1 <template>
 2     <div>
 3         <h1 :title="message">hello world</h1>
 4         <button @click="sayHi">say hi</button>
 5     </div>
 6 </template>
 7 
 8 <script>
 9 export default {
10     data(){
11         return {
12             message:"hello vue"
13         }
14     },
15     methods:{
16         sayHi(){
17             alert("Hi!")
18         }
19     }
20 }
21 </script>

4、课后练习

按照本章的内容，完成下列操做：

1. 下载vue/cli
2. 经过npm run serve命令启动项目
3. 将默认项目改写成一个计数器功能

 

【融职教育】在工做中学习，在学习中工做

本文同步分享在 博客"lmonkey_01"（CSDN）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。