晚秋星辰
晚秋星辰

【vue开发 环境搭建】从 vuejs环境搭建到组件化编程----Hello World！

一、vuejs开发预备知识

Nodejs是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。

npm是包管理工具，允许用户从NPM服务器下载别人编写的包或命令行程序到本地使用，允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

webpack是静态资源打包工具，grunt和gulp是自动化构建工具，grunt和gulp二选一就可以。

vue（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计，只关注视图层，非常容易与其它库或已有项目整合。

vue-cli相当于脚手架 给你自动生成模板工程

vue-router是 vue路由插件 支持你单页应用的

vue-loader是webpack下loader插件 可以把.vue文件 输出成组件

二、开发环境搭建

要使用vuejs有两种方法：

①可以创建一个本地的 .html 文件，然后引入 Vue:

<script src="https://unpkg.com/vue/dist/vue.js">

②利用vue-li搭建vue开发环境，步骤如下，详情见官网

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev

三、vuejs工程构架及Hello World界面

利用vue-cli搭建好开发环境之后，工程框架如图，图中标注了各个工程文件的作用

【vue开发 环境搭建】从 vuejs环境搭建到组件化编程----Hello World！_第1张图片

先看运行的界面如下，然后再解释代码

【vue开发 环境搭建】从 vuejs环境搭建到组件化编程----Hello World！_第2张图片

四、vuejs组件化编程

vue组件化编程的主要文件如下：
① index.html：用于展示最终页面 

<body>
   <div id="app">div>
    
body>

② main.js：入口文件 

import Vue from 'vue'
import App from './App'

    /* eslint-disable no-new */
    new Vue({
        el: '#app',
        template: '',
        components: { App }
    })

③ app.vue：页面布局文件
一个.vue组件是一个类html语法的文件，每个vue组件都有三个语法块组成，