简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

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

亚连
Lepaskan： 2018-05-31 17:13:04
asal
1846 orang telah melayarinya

这篇文章主要介绍了详解使用vue-cli脚手架初始化Vue项目下的项目结构，现在分享给大家，也给大家做个参考。

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
Salin selepas log masuk

创建项目

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

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

$ vue init webpack vuedemo
$ npm install
Salin selepas log masuk

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

[index.html]

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

[main.js]

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

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

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

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

‘components'：根组件

[App.vue]

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

只能包含一个子节点，也就是说顶层的p只能有一个（如图，id为‘app'的p元素没有兄弟节点）

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

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

[router/index.js]

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

 

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

解决Vue 通过下表修改数组,页面不渲染的问题

vue2.0 axios跨域并渲染的问题解决方法

layui之select的option叠加问题的解决方法

Atas ialah kandungan terperinci 详解使用vue-cli脚手架初始化Vue项目下的项目结构. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
vue-cli 初始化 脚手架
sumber：php.cn
Artikel sebelumnya：vue与vue-i18n结合实现后台数据的多语言切换方法 Artikel seterusnya：改变vue请求过来的数据中的某一项值的方法
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Menggunakan pembolehubah yang ditakrifkan dalam kaedah dalam templat Ini adalah kali pertama saya menggunakan Vue (v2 bukan v3) dan saya telah cuba menggunakan...
daripada 2024-04-06 18:10:25
0
2
513
Cipta pengguna dalam Vue menggunakan Firebase tanpa log masuk Saya telah mencipta borang untuk membuat profil pengguna. Tetapi apabila saya mencipta pen...
daripada 2024-04-06 14:20:12
0
1
514
Menyelesaikan isu binaan pengeluaran komponen web Vue3 Saya cuba memindahkan komponen vue2web saya ke vue3, walaupun masalah timbul apabila saya ...
daripada 2024-04-06 12:43:37
0
1
473
vue vee-validate menangkap masalah pemilihan pemilih tarikh Ikatan model v pada medan pemetik tarikh saya tidak berfungsi dengan betul. Apabila anda m...
daripada 2024-04-06 11:38:56
0
1
510
Adakah terdapat cara untuk menetapkan prop laluan dalam vue? Saya mahu menavigasi ke tab tertentu dalam halaman ini.$router.push({name:"AdminNotif...
daripada 2024-04-06 11:35:59
0
1
456
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！