详解使用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对图片base64编码字符串进行解码并输出图像示例
Mar 17 Javascript
href下载文件根据id取url并下载
May 28 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
Vue中的组件及路由使用实例代码详解
May 22 Javascript
Vue单文件组件开发实现过程详解
Jul 30 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中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
Laravel 5.3 学习笔记之 错误&amp;日志
2016/08/28 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
js实现转动骰子模型
2019/10/24 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
vue穿梭框实现上下移动
2021/01/29 Vue.js
python封装对象实现时间效果
2020/04/23 Python
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
境外导游求职信
2014/02/27 职场文书
大学生求职计划书
2014/04/30 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python