使用 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 相关文章推荐
Jquery Ajax方法传值到action的方法
May 11 Javascript
javascript中数组的定义及使用实例
Jan 21 Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
vuex的简单使用教程
Feb 02 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
原生js实现无缝轮播图效果
Jan 28 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
关于js与php互相传值的介绍
2013/06/25 PHP
php简单统计中文个数的方法
2016/09/30 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
微信小程序实现日历效果
2018/12/28 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
讲解Python中if语句的嵌套用法
2015/05/14 Python
python编写Logistic逻辑回归
2020/12/30 Python
python负载均衡的简单实现方法
2018/02/04 Python
Python实现快速计算词频功能示例
2018/06/25 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
python交换两个变量的值方法
2019/01/12 Python
wxPython实现文本框基础组件
2019/11/18 Python
中专毕业生自我鉴定
2014/02/02 职场文书
学校节能减排方案
2014/06/13 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
幼师个人总结范文
2015/02/28 职场文书
放假通知
2015/04/14 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
详解如何使用Nginx解决跨域问题
2022/05/06 Servers
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python