详解使用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 相关文章推荐
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
简单js代码实现selece二级联动(推荐)
Feb 18 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
使用Vue实现图片上传的三种方式
Jul 17 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 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和ACCESS写聊天室(八)
2006/10/09 PHP
PHP 防恶意刷新实现代码
2010/05/16 PHP
php 删除cookie方法详解
2014/12/01 PHP
js 模拟气泡屏保效果代码
2010/07/10 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python简单实现计算过期时间的方法
2015/06/09 Python
简单解析Django框架中的表单验证
2015/07/17 Python
Golang与python线程详解及简单实例
2017/04/27 Python
selenium+python环境配置教程详解
2019/05/28 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
Django的性能优化实现解析
2019/07/30 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
静心口服夜广告词
2014/03/20 职场文书
党员干部承诺书
2014/03/25 职场文书
暑期教师培训方案
2014/06/07 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书