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

前置条件:

熟悉使用 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

项目加载过程：

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 }
})

// 现在，应用已经启动了！

您可能感兴趣的文章:

  • vue.js的手脚架vue-cli项目搭建的步骤
  • vue.js学习之vue-cli定制脚手架详解
  • 详解如何使用vue-cli脚手架搭建Vue.js项目
  • vue.js之vue-cli脚手架的搭建详解
  • vue-cli入门之项目结构分析
  • Vue学习笔记进阶篇之vue-cli安装及介绍
  • 深入理解Vue-cli搭建项目后的目录结构探秘
  • 详解vue-cli本地环境API代理设置和解决跨域
  • 详解vue-cli快速构建项目以及引入bootstrap、jq
赞 (0)

相关推荐

  • vue.js之vue-cli脚手架的搭建详解

    vue.js之vue-cli脚手架的搭建详解

    相比于主流的angular和react前端框架,vue在近年来也变得非常火热.他吸取了前两者的优点,同时学习曲线也更加平缓.所以本魔王准备入坑了~~ 首先从vue的脚手架搭建开始吧. 这里不得不吐槽,window相对mac和linux确实在软件开发方面,非常不方便,代码打包,环境搭建等,简直爆炸~~..然而,嗯,本魔王就是在用win10,哎~ 嘛,废话不多说,今天的任务就是把脚手架搭好,虽然流程不麻烦,但是npm这个东东,真的可以一不小心就磨掉一下午的时间.这里无论用命令行工具,还是Git Ba

  • 详解vue-cli快速构建项目以及引入bootstrap、jq

    详解vue-cli快速构建项目以及引入bootstrap、jq

    vue-cli脚手架工具快速构建项目架构: ..首先默认了有已经安装了node... npm install -g vue-cli                   全局安装vue-cli vue init webpack cnm                  生成项目名为cnm的的项目模板,cnm自定义 npm install                                   到cnm文件夹中打开Git bash或者命令窗口初始化安装依赖 此时文件夹目录应该是这样 然后

  • 详解如何使用vue-cli脚手架搭建Vue.js项目

    详解如何使用vue-cli脚手架搭建Vue.js项目

    1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admin $ cd vue-admin $ npm install $ npm run dev 后面分步说明. 2. 安装 前提条件,Node.js >=4.x版本,建议使用6.x版本.npm版本 > 3.x 全局安装vue-cli $ npm install -g vue-cli 3. 使用 $ vue init

  • Vue学习笔记进阶篇之vue-cli安装及介绍

    Vue学习笔记进阶篇之vue-cli安装及介绍

    介绍 Vue-cli是Vue的脚手架工具 主要作用:目录结构.本地调试.代码部署.热加载.单元测试 地址:https://github.com/vuejs/vue-cli 安装 全局安装vue-cli npm install -g vue-cli 当然了,要想使用npm工具,就必须安装Node.js,node.js的安装方法这里就不做介绍了. 安装完成后,在终端输入以下命令, 可以查看vue的版本:vue -V 输入以下命令,可以查看官方提供的模板: vue list 我们可以看到,vue官方提

  • vue.js学习之vue-cli定制脚手架详解

    前言 年初的时候公司的老后台系统实在难以维护和继续在其上开发了,因为这个系统被很多人写过页面,有前端有后端,编写前端代码时都非常随意,加之没有模块化,复用性和可维护性都极低,便下定决定,重新搞一套. 经过一段时间的调研选择了vue全家桶+elementUI来开发后台系统,让交互体验更好,让开发体验更好,让生产效率提高. 从零搭建其实考虑的事情还挺多的,比如: 如何管理代码仓库 开发环境,测试环境搭建 如何接入公司的打包上线流程 如何目录划分 如何划分模块 登录和权限如何做 这篇文章来记录下和脚手

  • vue.js的手脚架vue-cli项目搭建的步骤

    vue.js的手脚架vue-cli项目搭建的步骤

    手脚架是什么? 众所周知,现在的前端项目发展得越渐越大,我们前端程序员要从0开始去搭建一套完整的项目很费时,所以这时候前端工程的手脚架就出现了. 我用得vue-cli也是其中之一,还有其他的我也说不清,我就说一下我接触比较多的这款vue-cli, 但是所有手脚架的核心:都是为了能够快速搭建一个完整的项目的结构,开发者只需要在生成的项目结构的基础上进行开发即可,非常简单高效. 然后, vue-cli 的脚手架项目模板有browserify 和 webpack ,vue-lic这个手脚架是把预定义的

  • vue-cli入门之项目结构分析

    vue-cli入门之项目结构分析

    前言 在上一篇项目搭建文章中,我们已经下载安装了node环境以及vue-cli,并且已经成功构建了一个vue-cli项目,那么接下来,我们来梳理一下vue-cli项目的结构. 总体框架 一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关文件,了解一下即可. 文件结构细分 1.build--[webpack配置] build文件主要是webpack的配置,主要启动文件是dev-server.js,当我们输入npm run dev首先启动的就是

  • 深入理解Vue-cli搭建项目后的目录结构探秘

    我最近也在研究Vue-cli的路上,今天了解一下Vue-cli目录结构,那么今天也算个学习笔记吧! 一.前言 这里先说一下使用vue-cli之前的事情. 由于刚刚接触Vue不久,就接到了一个移动端项目,于是打算使用vue来进行一次尝试,所以按照练习时候的样子,emmm先把vue.js引入网页里来,emmm自己的外联main.css样式引进来,还有自己的main.js文件,还有一些图片布拉布拉的,所以我整个项目的结构如下:(捂脸) ├── css ├── images ├── index.html

  • 详解vue-cli本地环境API代理设置和解决跨域

    详解vue-cli本地环境API代理设置和解决跨域

    前言 我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了,通常我们的请求地址是以localhost:8080来请求接口数据的,localhost是没有办法设置cookie的. 我们可以在vue-cli配置文件里面设置一个代理,跨域的方法有很多,通常需要后台来进行配置.我们可以直接通过node.js代理服务器来实现跨域请求. vue proxyTable接口跨域请求调试 在vue-cli项目中的config文件夹下的index.js配置文件中,dev长这样子: de

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

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

    前置条件: 熟悉使用 Javascript + HTML5 + css3. 理解 ES2015 Module 模块(export.import.export-default). 了解 nodejs 基础知识,npm 常用命令,以及 npm script 使用 (vue 项目中使用 npm 进行包管理). 了解 webpack 打包工具 (常用配置选项以及 loader 概念).(webpack webpack.github.io/ 是一个模块打包工具.它将一堆文件中的每个文件都作为一个模块,找出

  • 前端框架Vue.js构建大型应用浅析

    前端框架Vue.js构建大型应用浅析

    真正的模块化 前端模块化很早就开始了,无论是 require.js,browserify 进行模块化打包, 还是 Angular 进行依赖注入,我们都可以把JS代码分成一个个小的模块并组装起来.然后我们还会通过 less 或者 sass 来把CSS文件也拆成一个个小的模块来写,甚至我们在CSS代码中感受到了 封装,继承,多态 等面向对象的特性. 然而,在 webpack 出来之前,我们所谓的模块化根本不能算作模块化.为什么这么讲,因为我们存在一个重要的问题没有解决,就是JS模块对CSS模块的依赖

  • 使用Vue.js和Flask来构建一个单页的App的示例

    在这个教程中,我们将讲解如何将vue.js单页应用与Flask后端进行连接. 一般来说,如果你只是想通过Flask模板使用vue.js库也是没有问题的.但是,实际上是一个很明显的问题那就是,Jinja(模板引擎)也和Vue.js一样采用双大括号用于渲染,但只是一个还算过的去的解决方案. 我想要一个不同的例子.如果我需要建立一个单页应用程序(应用程序使用单页组成, vue-router 在HTML5的History-mode以及其他更多好用的功能)用vue.js,由Flask提供Web服务?简单地

  • angular.js + require.js构建模块化单页面应用的方法步骤

    angular.js + require.js构建模块化单页面应用的方法步骤

    前言 本文主要给大家介绍的是关于利用angular.js + require.js构建模块化单页面应用的方法,分享出来供大家参考学习,需要的朋友们下面来一起看看详细的介绍吧. AngularJS描述: angularjs是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来构建一个CRUD应用,它提供了非常方便的且统一高效的解决方案,其数据绑定.基本模版标识符.表单验证.路由.深度链接.组件重用.依赖注入.以及HT

  • 利用JS hash制作单页Web应用的方法详解

    前言 本文主要给大家介绍了关于利用JS hash制作单页Web应用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.何为hash 这里要讲的hash(也叫哈希),指的是JS中location对象的hash属性,它返回的是URL中#后所跟的零个或多个字符.通常,我们可以通过location.hash的方式获取哈希值或设置哈希值.当然,我们也可以通过设置a标签的href属性来设置哈希值,当用户点击该a标签时即可改变页面的哈希值. 例如: /** JS方式 **/ lo

  • webpack+vue.js构建前端工程化的详细教程

    本篇主要介绍三块知识点: node.js ,vue.js,webpack前端工程化 ,希望对您能有所帮助. 本文来自于csdn,由火龙果软件Alice编辑推荐. node.js基本入门 node.js介绍 node.js可以让javascript程序在后端运行起来.我们之前所熟知的javascript都是运行在前端浏览器,我们编写好了javascript代码后,由浏览器解释执行.而node.js,可以让我们编写javascript,然后在后端运行起来.现在的javascript和java.pyt

  • 如何使用Vuex+Vue.js构建单页应用

    如何使用Vuex+Vue.js构建单页应用

    前言:在最近学习 Vue.js 的时候,看到国外一篇讲述了如何使用 Vue.js 和 Vuex 来构建一个简单笔记的单页应用的文章.感觉收获挺多,自己在它的例子的基础上进行了一些优化和自定义功能,在这里和大家分享下学习心得. 在这篇教程中我们将通过构建一个笔记应用来学习如何在我们的 Vue 项目中使用 Vuex.我们将大概的过一遍什么是 Vuex.js,在项目中什么时候使用它,和如何构建我们的 Vue 应用. 这里放一张我们项目的预览图片: 项目源码:vuex-notes-app:有需要的同学可

  • 如何在Vue.js中实现标签页组件详解

    如何在Vue.js中实现标签页组件详解

    前言 标签页组件,即实现选项卡切换,常用于平级内容的收纳与展示. 因为每个标签页的内容是由使用组件的父级控制的,即这部分内容为一个 slot.所以一般的设计方案是,在 slot 中定义多个 div,然后在接到切换消息时,再显示或隐藏相关的 div.这里面就把相关的交互逻辑也编写进来了,我们希望在组件中处理这些交互逻辑,slot 只单纯处理业务逻辑.这可以通过再定义一个 pane 组件来实现,pane 组件嵌在 tabs 组件中. 1 基础版 因为 tabs 组件中的标题是在 pane 组件中定义

  • Vue.js构建你的第一个包并在NPM上发布的方法步骤

    Vue.js构建你的第一个包并在NPM上发布的方法步骤

    本文我们将学习如何制作一个vue插件,并将其分发到npm上,能够让其他人安装使用. 插件大大地提高了开发者的开发效率.我们的大多数项目都依赖于它们,因为它们能够以极快的速度发布新功能. 正如官方Vue.js文档中所述,插件的范围没有限制.通常我们想实现的功能有下面5种: 添加全局方法或者属性 (如: vue-custom-element) 添加全局资源:指令/过滤器/过渡等 (如:vue-touch) 通过全局 mixin 方法添加一些组件选项 (如:vue-router) 添加 Vue 实例方

  • 利用纯Vue.js构建Bootstrap组件

    没有jQuery, bootstrap.js, 或不需要任何第三方插件. This repository contains a set of native Vue.js components based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are: Vue.js

随机推荐