I heard that the vue project can be used without bouild?

The article comes from the public number: The Clown's Cabin

People often say how simple, if not insignificant, Vue JS or React is. W ell... I don't agree. T hey are not simple. A fter all, they are widely used to build large-scale, often mission-critical, systems. I n addition to these overly optimistic courses, there is much to learn. T heir ecosystems are huge. T ools are demanding. T he documentation is very rich. Discovering and understanding best practices and efficient design patterns requires a lot of effort.

So what's their appeal? F or me, it's their progress. C omplexity is gradually introduced into the project only when necessary. I can start with a simple JavaScript with some prerequisites that don't require complex build settings. T hen, as the demand grew, I started adding new concepts and learning how to use them. T hings like modules, components, routing, state management, state propagation, asynchronous code, responsiveness, server-side rendering, and so on will eventually appear in the picture. But only when their time comes, only when I'm ready for them!

The source code for this article can be found in the bitbucket.org/letsdebugit/minimalistic-vue, where you can run the sample application.

Simple tools for simple projects

When I start a new project, a simple start is critical. T he cognitive burden of this profession is heavy enough. I don't need any more unless I really need it. E qually important, project settings remain simple as long as the application remains simple. F or many projects, all I need is a small smart engine behind a web page. S omething that connects to Photo Gallery. U pdates can be obtained from external sources and UI synchronization is maintained. W hy would I introduce TypeScript and webpack for this? B ut The Cost Of Vanilla JS Is High. I like to have things like state management, responsiveness, and data binding. T hey save a lot of time and help build a consistent user interface. F ortunately, this is possible in a progressive web framework. In the following example, I want to show you how to introduce Vue JS in the simplest way and enjoy its features.

Application design

The following example is a small single-page web application. I t has a header, content area and footer. T here is a message and a button in the content area. When the user clicks the button, the message changes:

As a cautious programmer, I want to construct my application correctly from the start. There are the following elements in the user interface:

• header
• main area
• footer

I want to define each component as a separate component. I want to put their code in separate modules for easy identification and use.

In a typical Vue JS setting, you'll use a single-component file for .vue. U nfortunately, this requires a webpack, rollup, etc.-based build process. A s it turns out, you can get almost the same experience without using any build process! I t may not be as comprehensive as the original protocol, but it's good for many simple scenarios. What's more, it doesn't have the complexity and dependency that general build processes and CLI tools introduce.

The structure of the project

The structure of the project is as follows:

index.html
index.js
index.css
header/
    header.js
    header.css
content/
    content.js
    content.css
footer/
    footer.js
    footer.css

Our logical UI components are clearly reflected in the catalog structure of the project.

Self-reliance

When the browser loads index. when html, the following occurs:

• The Vue JS library is a unpkg.com/vue obtained from the CDN library
• Get the component style
• The application module is exported from index .js and then executed

Notice how we are using < script type s "module" to tell the browser that we are loading all the fancy modern ES6 code!

When an index .js is performed, it imports subsequent modules that contain our components:

Content from 内容来自/content/content.js
Header from 标题来自/header/header.js
Footer from 的页脚/footer/footer.js

These components are not much different from regular Vue JS single file components. They can have all the features and functionality of Vue JS components, such as:

data
props
methods
computed
lifecycle events
slots
template with markup
etc.

Because there is no build process, our components must be grouped together in different ways. M odern JavaScript features help us in this regard. I nstead of packaging, we can import the required dependencies wherever we need them. A fter so many years of painstaking packaging browser finally know how to import modules; We'll then use the JS template text instead of template.

The structure of the component code is as follows:

const template = `
  <div>
  ...
  </div>
`
export default {
  template,
  data () {
  },
  computed: {
  },
  // etc.
}

The main application components are in the index .js file. Its task is to assign custom HTML tags to all components, such as < app-header > or < app-footer >.

import Header from './header/header.js'
import Content from './content/content.js'
import Footer from './footer/footer.js'
const App = {
  el: 'main',
  components: {
    'app-header': Header,
    'app-content': Content,
    'app-footer': Footer
  }
}
window.addEventListener('load', () => {
  new Vue(App)
})

Then use these custom tags in index. B uild the application UI in an html file. We ended up with an easy-to-understand user interface:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Minimalistic Vue JS</title>
  <link rel="stylesheet" href="index.css">
  <link rel="stylesheet" href="header/header.css">
  <link rel="stylesheet" href="content/content.css">
  <link rel="stylesheet" href="footer/footer.css">
  <script src="https://unpkg.com/vue">
  </script>
  <script src="index.js" type="module">
  </script>
</head>
<body>
  <main>
    <app-header bg-color="#c5cae2">
    </app-header>
    <app-content>
    </app-content>
    <app-footer>
      (c) Tomasz Waraksa, Dublin, Ireland
    </app-footer>
  </main>
</body>
</html>

Routing selection

A less trivial application usually has a bunch of views that users can navigate to. A s it turns out, the Vue router works in our settings without any problems. Y ou can define a view or page just like any other component, using the same method described above. Then, instead of registering these components as custom tags, link them to routes in a standard way, such as:

import Home from './home/home.js'
import About from './about/about.js'
export default [
  {
    name: 'home',
    path: '/',
    component: Home
  },
  {
    name: 'about',
    path: '/about',
    component: About
  }
]

Then get the Vue Router library and index. Add a router placeholder to html:

<head>
  ...
  <script src="https://unpkg.com/vue-router">
  </script>
</head>
<body>
  ...
  <router-view>
  </router-view>
  ...
</body>

Finally, initialize the router with the application in index .js:

const router = new VueRouter({ routes })
const app = {
  el: 'main',
  router,
  ...
}

You can now navigate to both pages by entering a URL, using < router-link > component, or programmatically.

Finally, we have almost all the power of Vue JS without any build process complexity. T o deploy this application, we simply copy the files to a web server. Then just hope that our visitors will use a decent browser.

At last

This article can also be found on author Tomasz Waraksa's blog Let's Debug It. T he full source code can be found on google bitbucket.org/letsdebugit/minimalistic-vue. All the honors and thanks go to the creators of the Vue JS framework.

Above is W3Cschool编程狮 about heard vue project can also be used without bouild? Related to the introduction, I hope to help you.