Vue完整项目构建(进阶篇)


Posted in Javascript onFebruary 10, 2018

前置条件:

  1. 熟悉使用 Javascript + HTML5 + css3。
  2. 理解 ES2015 Module 模块(export、import、export-default)。
  3. 了解 nodejs 基础知识,npm 常用命令,以及 npm script 使用 (vue 项目中使用 npm 进行包管理)。
  4. 了解 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完整项目构建(进阶篇) 

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完整项目构建,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 Javascript
JS简单获得节点元素的方法示例
Feb 10 #Javascript
JS简单添加元素新节点的方法示例
Feb 10 #Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 #Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 #jQuery
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 #Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 #Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 #Javascript
You might like
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
Python中多线程thread与threading的实现方法
2014/08/18 Python
浅析Python中的多进程与多线程的使用
2015/04/07 Python
实例解析Python中的__new__特殊方法
2016/06/02 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
中学教师实习自我鉴定
2013/09/28 职场文书
装修活动策划方案
2014/08/27 职场文书
违反交通法规检讨书
2014/09/10 职场文书
公证委托书格式
2014/09/13 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
详解Python描述符的工作原理
2021/06/11 Python
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang