使用 vue.js 构建大型单页应用


Posted in Javascript onFebruary 10, 2018

前置条件:

熟悉使用 Javascript + HTML5 + css3。
理解 ES2015 Module 模块(export、import、export-default)。
了解 nodejs 基础知识,npm 常用命令,以及 npm script 使用 (vue 项目中使用 npm 进行包管理)。
了解 webpack 打包工具 (常用配置选项以及 loader 概念)。(webpack webpack.github.io/ 是一个模块打包工具。它将一堆文件中的每个文件都作为一个模块,找出它们的依赖关系,将它们打包为可部署的静态资源。webpack 的使用也需要 npm 的安装方式)。

开始安装:

使用 vue-cli 构建大型单页应用:vue.js 的脚手架工具。

执行下述代码,即可完成项目基础构建(已配置好 webpack、依赖包的安装、基本目录的生成)。

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

主要目录:

├── build // webpack的基本配置、开发环境配置、生产环境配置
    ├── config // 路径、端口以及反向代理配置
    ├── dist // webpack打包后的静态资源
    ├── node_modules // npm安装的依赖包
    ├── src // 前端主文件
    │   ├── assets // 静态资源
    │   │   ├── font
    │   │   ├── img
    │   │   └── scss
    │   ├── components // 单个组件
    │   │   ├── xxx.vue // 单文件组件
    │   ├── router // 路由配置
    │   ├── store // 全局变量
    │   ├── App.vue // App组件
    │   ├── main.js 主入口文件
    ├── static // 静态文件
    ├── .babelrc  // babel的配置项
    ├── .editorconfig  // 编辑器的配置项
    ├── .gitignore  // 会忽略语法检查的目录
    ├── index.html // 入口页面
    ├── package.json // 项目的描述和依赖
package.json文件说明:项目的描述和依赖

1. scripts:编译项目的一些命令

例:执行 npm run dev ,即执行 scripts 中对应的 node build/dev-server.js。

2. dependencies:项目发布时的依赖

例:执行 npm install wx --save ,即安装依赖模块 wx。

3. devDependencies:项目开发时的依赖

例:执行 npm install sass --save-dev ,即安装依赖模块 sass。

附:npm 相关说明:

npm 为 Node.js 版本管理和依赖包管理工具,通过 node 环境来安装前端构建项目所需依赖包。

npm 安装下载速度过慢,使用淘宝镜像 cnpm install 快速安装。设置方法:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

项目加载过程:

使用 vue.js 构建大型单页应用

1. index.html 页面

当前构建项目为 SPA (单页面应用),index.html 页面即为入口页面,进行meta 等相关页面配置。

​该页面的 <div id="app"></div> 挂载了主组件。

2. main.js:主入口文件

​注: 在 webpack.base.config 中设置 -> entry: { app: './src/main.js'}

​该文件初始化 vue 实例并引入相应模块 (引入前需确认在 package.json 中进行配置并安装),附 main.js 引入及说明:

​ import Vue from 'vue'   // 引入vue
​ 
​ import App from './App'   // 引入主组件App.vue
​ 
​ import router from './router' // 引入路由配置文件
​ 
​ import axios from 'axios' // 引入网络请求工具axios

3. App.vue:主组件

​在 index.html 入口页面中挂载了主组件,并在 main.js 主入口文件中引入了主组件。

​创建了其他组件 (例: /src/components/xxx.vue )后,通过路由配置即可渲染在当前主组件中。

4. 路由配置 vue-router

​路由配置:将组件 (components) 映射到路由 (routes),然后告诉 vue-router 在哪里渲染它们

npm install vue-router
import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

// 1.定义(路由)组件:import (当前应用中为单文件组件)。
import Home from '../components/Home.vue'

// 2. 定义路由并创建 router 实例,然后传 `routes` 配置
// 每个路由应该映射一个组件。
var router = {}

export default router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
   ]
})

// 3. 在main.js主入口文件中创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

// 现在,应用已经启动了!

Javascript 相关文章推荐
js异或加解密效果代码
Jun 25 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
vue中实现上传文件给后台实例详解
Aug 22 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 Javascript
javascript中的隐式调用
Feb 10 #Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 #Javascript
webpack之devtool详解
Feb 10 #Javascript
React组件refs的使用详解
Feb 09 #Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 #Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 #Javascript
js自定义trim函数实现删除两端空格功能
Feb 09 #Javascript
You might like
9个PHP开发常用功能函数小结
2011/07/15 PHP
扩展String功能方法
2006/09/22 Javascript
javascript 写的一个简单的timer
2009/07/30 Javascript
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
javascript回调函数详解
2018/02/06 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python读取mp3中ID3信息的方法
2015/03/05 Python
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
python 贪心算法的实现
2020/09/18 Python
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
总经理秘书工作职责
2013/12/26 职场文书
文秘人员工作职责
2014/01/31 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
高校教师个人总结
2015/02/10 职场文书
学期个人工作总结
2015/02/13 职场文书
暑假生活随笔
2015/08/15 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书
Python django中如何使用restful框架
2021/06/23 Python
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python