1.借助官方提供的脚手架vue-cli构建项目
- 全局安装vue-cli
npm install -g vue-cli
- 创建一个基于webpack的项目
vue init webpack vue-monitor
image.png
- 时间可能有点久，等待创建完成之后，进入根目录，然启动应用
cd vue-monitor
npm run dev
- 启动之后，界面是这样的，至此，已经成功创建了一个vue应用
image.png
2.项目结构
这里使用vs code 最为开发工具，打开刚刚创建的 vue-monitor ，它的目录结构如下：
image.png
这些文件都是自动生成的。build文件夹中的内容是用来构建应用的；config目录下是一些配置信息，比如正式环境和开发环境。src 目录中存的是源文件，代码就是放到这个目录下；staic目录中存的是编译后的文件，比如应用编译好之后，可以单独部署到服务器；test目录里面是一些测试相关的内容，暂时不太理解，先不使用。
对于开发来说，src目录才是关注的重点。一个正常的vue应用，src目录下应该包含以下文件夹
-
components： 里面用于存放一个个的组件。
-
router ：路由，在一个单页应用中，这是必不可少的一部分。
-
service ：定义一些接口，便于与后台交互，与后台不同api交互的方法，都写到这里面。
-
image ： 存放图片资源
-
style ：存放css样式，或者说通用样式吧。
-
store ：一般稍微复杂一点的应用，都会 用上状态管理框架，这时会有一个 store 文件，用于管理状态
从 package.json文件中可以看出，使用 vue-cli 创建的应用已经默认添加了 vue-router，但是没有用到vuex：
image.png
- main.js 文件：entry指定的为整个应用的入口文件，这涉及到 webpack 的 配置 和 整个应用的启动流程。打开 build 下的 webpack.base.conf.js 文件，可以看到以下内容
image.png
3.组件结构
在 src 目录下，除了一个 main.js文件，还有一个 App.vue 文件，这里就涉及到另外一个概念：vue组件。 每个.vue文件，对应一个vue组件，也称单文件组件。App.vue 组件的内容如下：
image.png
-
template： 标签里面的内容其实就是一些 html标签，简单来说就是用来展示内容。
-
script ：里面就是正常的 js脚本，比如这里是导出 一个 名为 App的模块
-
style： 里面就是样式，和常见的html文件类似
以上三部分内容就定义了一个基本的 vue组件。需要注意的是，如果你使用vs code作为你的开发工具，需要安装一个插件才能支持 vue 语法高亮：Vetur
4.组件使用方式
每个vue应用，都应该通过创建一个 vue根实例 开始的，创建一个vue实例很简单：
let vm = new Vue({
//选项
})
就相当于是 new 一个对象吧，Vue本来就是一个全局对象。 组件的使用之前需要注册，所谓的注册就是在 vue 实例 或者 组件 的实例选项 components 中维护该组件，例如 main.js 文件
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
主要看这一段
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
el 就是挂在点，其实就是 template中对应的id，这里能 使用 ‘#app'，是因为在文件头 已经引入了 App组件，而App组件中的 template中有一个 id='app' 的div；router就是注册路由；components: { App } 就是注册App组件；template: '<App/>' 表示在项目启动后展示的内容就是 App.vue 中 template 的内容。当然，这里只是简单介绍组件的概念，具体的用法可以参考官方文档。
网友评论