详解使用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 相关文章推荐
javascript 树控件 比较好用
Jun 11 Javascript
一些mootools的学习资源
Feb 07 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
javascript适合移动端的日期时间拾取器
Nov 10 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
vue2.0.js的多级联动选择器实现方法
Feb 09 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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
PHP 判断变量类型实现代码
2009/10/23 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
Python实现ping指定IP的示例
2018/06/04 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
python中class的定义及使用教程
2019/09/18 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
《月光启蒙》教学反思
2014/03/01 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
银行求职自荐信
2014/06/30 职场文书
工作检讨书范文
2015/01/23 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
高中美术教学反思
2016/02/17 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js
Nginx实现会话保持的两种方式
2022/03/18 Servers