详解使用vue-cli脚手架初始化Vue项目下的项目结构


Posted in Javascript onMarch 08, 2018

vue-cli是Vue 提供的一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

使用vue-cli有以下几大优势:

  1. vue-cli是一套成熟的Vue项目架构设计,会跟着Vue版本的更迭而更新 
  2. vue-cli提供了一套本地的热加载的测试服务器 
  3. vue-cli集成了一套打包上线的方案,可使用webpack或Browserify等构建工具

安装

下面来安装vue-cli

# 必须全局安装vue-cli,否则无法使用vue命令
# 安装完成之后使用vue -V检查vue-cli是否安装成功及版本信息

$ npm install -g vue-cli
$ vue -V

创建项目

接下来使用vue-cli创建一个新的Vue项目

# 项目创建完之后需要执行npm install安装依赖

$ vue init webpack vuedemo
$ npm install

创建的vuedemo文件夹所包含的文件如下:

详解使用vue-cli脚手架初始化Vue项目下的项目结构

[index.html]

index.html和其他html文件一样,但一般只定义一个空的根节点,在main.js里面定义的实例将挂载在根节点下,内容都通过vue组件来填充,由于所有的挂载元素会被Vue生成的DOM替换,因此不推荐直接挂载实例到 <html> 或者 <body> 上。

详解使用vue-cli脚手架初始化Vue项目下的项目结构

[main.js]

是Vue应用的入口文件,用来创建一个新的Vue实例,并将这个实例挂载在根节点下,同时也可以用来引入Vue插件

详解使用vue-cli脚手架初始化Vue项目下的项目结构

‘el'选项:提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标,这里就是index.html中id为‘app'的节点

‘router'选项:将router实例注入到Vue根实例中,使它的每个子组件都可以访问$router (router实例)和$route (当前激活的路由信息对象)

‘template'选项:以一个字符串模板作为 Vue 实例的标识使用

‘components':根组件

[App.vue]

项目的根组件,可以包含其他的子组件,从而组成组件树

详解使用vue-cli脚手架初始化Vue项目下的项目结构

<template></template>只能包含一个子节点,也就是说顶层的div只能有一个(如图,id为‘app'的div元素没有兄弟节点)

<script></script>通常用es6来写,用export default导出

<style></style>中的样式默认是影响全局的,如需定义作用域只在该组件下起作用,需在标签上加scoped,<style scoped></style>

[router/index.js]

路由配置文件,作用是将组件映射到路由,方便知道在哪里渲染它们

详解使用vue-cli脚手架初始化Vue项目下的项目结构 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js下利用控制器载入对应脚本
Jul 17 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 #Javascript
JavaScript满天星导航栏实现方法
Mar 08 #Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 #Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 #Javascript
layui select动态添加option的实例
Mar 07 #Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 #Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 #Javascript
You might like
比较完整的微信开发php代码
2016/08/02 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
Python脚本暴力破解栅栏密码
2015/10/19 Python
python数据结构之链表的实例讲解
2017/07/25 Python
Python实现图片转字符画的示例代码
2017/08/21 Python
Python中的self用法详解
2019/08/06 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
会计毕业生自荐信
2013/11/21 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
代理商会议邀请函
2014/01/27 职场文书
小学老师寄语大全
2014/04/04 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
企业战略合作意向书
2015/05/08 职场文书
总结会主持词
2015/07/02 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
nginx配置限速限流基于内置模块
2022/05/02 Servers