Instructions for project structure of vue
This time I will bring you the Vue project structure instructions. What are the precautions for the Vue project structure instructions. The following is a practical case, let’s take a look.
After creating a new project, let’s take a look at the directory structure of the project
The contents of several main files
index.html file (entry file, enter index.html first after entering the system)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>blog</title> </head> <body> <p id="app"></p> <!-- built files will be auto injected --> </body> </html>
main.js file (import the corresponding module)
improt Vue from 'vue' //可以将脚手架中下载的模块拿出来，可以直接使用new来实例化vue对象
improt App from './App'
Vue.config.productionTip = false
new Vue({
el:'#app', //当前的vue要控制的容器是谁，要获取的这个容器元素是谁，#app是index.thml里的id=“app”
template:'<App/>', //模板，可以写对应的p，也可以写组件调用的标签，只要有一个根标签即可
components:{ App } //想要调用组件，必须在component里注册这个组件，这里的APP来源于引入的./App文件，即：App.vue文件
})App.vue file (root component)
<!--1模板：html结构 -->
<template>
<p id="app">
<img src="./assets/logo.png">
<!--路由入口，对应进入router下面的index.js文件-->
<router-view/>
</p>
</template>
<!--2行为：处理逻辑 -->
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>The index.js file under the router folder (front-end routing)
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld' //导入模板文件
Vue.use(Router)
export default new Router({
routes: [ //定义对应模板的路径，url对应进入的模板
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})Template:
− Template can be used to include some content. It will not actually be rendered into the dom itself. You can directly use the template tag to include it. Note: There is and can only be one root tag in the template.
Behavior:
Associate with other components through import, and then use
export default {
name: 'App',
components: {
HelloWorld
}Just register and you can call.
Style:
Same as normal css styles. You can use sass syntax, but you need to install sass in the project. After the installation is successful, you can see the corresponding information in package.json
Project loading process
Project start: index.html ----> main.js ----> App.vue
From the index.html entry file, it will execute the main.js file, and main.js will instantiate our Vue object, the App.vue component will be executed next. After reaching App.vue, if the template has content, it will insert the content in the template into the index.html container. You can also set the corresponding attributes in the behavior attributes. .
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
$.ajax() method how to obtain json data from the server
AngularJS1.x application How to migrate to React
The above is the detailed content of Instructions for project structure of vue. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Share an easy way to package PyCharm projects
Dec 30, 2023 am 09:34 AM
Share the simple and easy-to-understand PyCharm project packaging method. With the popularity of Python, more and more developers use PyCharm as the main tool for Python development. PyCharm is a powerful integrated development environment that provides many convenient functions to help us improve development efficiency. One of the important functions is project packaging. This article will introduce how to package projects in PyCharm in a simple and easy-to-understand way, and provide specific code examples. Why package projects? Developed in Python
Can AI conquer Fermat's last theorem? Mathematician gave up 5 years of his career to turn 100 pages of proof into code
Apr 09, 2024 pm 03:20 PM
Fermat's last theorem, about to be conquered by AI? And the most meaningful part of the whole thing is that Fermat’s Last Theorem, which AI is about to solve, is precisely to prove that AI is useless. Once upon a time, mathematics belonged to the realm of pure human intelligence; now, this territory is being deciphered and trampled by advanced algorithms. Image Fermat's Last Theorem is a "notorious" puzzle that has puzzled mathematicians for centuries. It was proven in 1993, and now mathematicians have a big plan: to recreate the proof using computers. They hope that any logical errors in this version of the proof can be checked by a computer. Project address: https://github.com/riccardobrasca/flt
A closer look at PyCharm: a quick way to delete projects
Feb 26, 2024 pm 04:21 PM
Title: Learn more about PyCharm: An efficient way to delete projects. In recent years, Python, as a powerful and flexible programming language, has been favored by more and more developers. In the development of Python projects, it is crucial to choose an efficient integrated development environment. As a powerful integrated development environment, PyCharm provides Python developers with many convenient functions and tools, including deleting project directories quickly and efficiently. The following will focus on how to use delete in PyCharm
PyCharm Practical Tips: Convert Project to Executable EXE File
Feb 23, 2024 am 09:33 AM
PyCharm is a powerful Python integrated development environment that provides a wealth of development tools and environment configurations, allowing developers to write and debug code more efficiently. In the process of using PyCharm for Python project development, sometimes we need to package the project into an executable EXE file to run on a computer that does not have a Python environment installed. This article will introduce how to use PyCharm to convert a project into an executable EXE file, and give specific code examples. head
How to Make a Shopping List in the iOS 17 Reminders App on iPhone
Sep 21, 2023 pm 06:41 PM
How to Make a GroceryList on iPhone in iOS17 Creating a GroceryList in the Reminders app is very simple. You just add a list and populate it with your items. The app automatically sorts your items into categories, and you can even work with your partner or flat partner to make a list of what you need to buy from the store. Here are the full steps to do this: Step 1: Turn on iCloud Reminders As strange as it sounds, Apple says you need to enable reminders from iCloud to create a GroceryList on iOS17. Here are the steps for it: Go to the Settings app on your iPhone and tap [your name]. Next, select i
What to do if there is an error when starting the react project
Dec 27, 2022 am 10:36 AM
Solution to the error when starting the react project: 1. Enter the project folder, start the project and view the error message; 2. Execute the "npm install" or "npm install react-scripts" command; 3. Execute "npm install @ant-design/ pro-field --save" command.
Based on the open source ChatGPT Web UI project, quickly build your own ChatGPT site
Apr 15, 2023 pm 07:43 PM
As a technology blogger, Fengfeng prefers all kinds of tossing. I have previously introduced ChatGPT to connect to WeChat, DingTalk and Knowledge Planet (if you haven’t seen it, you can read the previous article). Recently, when I looked at open source projects , discovered a ChatGPTWebUI project. Thinking that I have never connected ChatGPT to WebUI before, it is really good to have this open source project to use. Here are the practical installation steps to share with everyone. The installation official provides many installation methods on Github’s project documentation, including manual installation, docker deployment, and remote deployment. It’s amazing that when choosing a deployment method, I thought about simplicity at first.
Basic tutorial: Create a Maven project using IDEA
Feb 19, 2024 pm 04:43 PM
IDEA (IntelliJIDEA) is a powerful integrated development environment that can help developers develop various Java applications quickly and efficiently. In Java project development, using Maven as a project management tool can help us better manage dependent libraries, build projects, etc. This article will detail the basic steps on how to create a Maven project in IDEA, while providing specific code examples. Step 1: Open IDEA and create a new project Open IntelliJIDEA
