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 相关文章推荐
javascript 浏览器检测代码精简版
Mar 04 Javascript
自动最大化窗口的Javascript代码
May 22 Javascript
js中function()使用方法
Dec 24 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
精通JavaScript的this关键字
May 28 Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
vue增删改查的简单操作
Jul 15 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 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
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
Python单元测试框架unittest简明使用实例
2015/04/13 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
python实现AdaBoost算法的示例
2020/10/03 Python
什么是lambda函数
2013/09/17 面试题
商务专员岗位职责
2013/11/23 职场文书
工作作风承诺书
2014/08/30 职场文书
委托书的写法
2014/09/16 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
辩论赛主持人开场白
2015/05/29 职场文书