Shulou(Shulou.com)06/01 Report--

This article mainly introduces "case analysis of the use of vue without build". In daily operation, I believe that many people have doubts about the use of case analysis of vue without build. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "vue without build use case analysis". Next, please follow the editor to study!

Application programming

As a cautious programmer, I want to build the 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 a separate module for easy identification and use.

In a typical Vue JS setup, you will use a single component file for .vue. Unfortunately, this requires a build process based on webpack, rollup, and so on. It turns out that you can get almost the same experience without using any build process! It may not be as comprehensive as the original protocol, but it is good for many simple scenarios. More importantly, it does not have the complexity and dependencies introduced by regular build processes and CLI tools.

Project structure

The project is structured as follows:

Index.htmlindex.jsindex.cssheader/ header.js header.csscontent/ content.js content.cssfooter/ footer.js footer.css

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

Regeneration through our won efforts

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

The Vue JS library is unpkg.com/vue obtained from the CDN library

Get component style

The application module is exported from index.js and then executed

Notice how we use

< script type = " module" & 来告诉浏览器我们正在加载所有花里胡哨的现代 ES6 代码！ 当执行 index.js 时，它会导入包含我们的组件的后续模块: Content from 内容来自/content/content.jsHeader from 标题来自/header/header.jsFooter from 的页脚/footer/footer.js 这些组件与常规的 Vue JS 单文件组件没有多大区别。它们可以拥有 Vue JS 组件的所有特性和功能，比如: datapropsmethodscomputedlifecycle eventsslotstemplate with markupetc. 因为没有构建过程，我们的组件必须以不同的方式组合在一起。现代的 JavaScript 特性在这方面对我们有所帮助。与打包相反，我们可以在任何需要的地方import所需的依赖项。经过这么多年不费脑筋的打包浏览器终于知道如何导入模块; 然后，我们将使用 JS 模板文本代替template。 组件代码的结构如下: const template = ` ... `export default { template, data () { }, computed: { }, // etc.} 主要的应用程序组件在 index.js 文件中。它的任务是为所有组件分配定制的 HTML 标记，比如 < 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. Build the application UI in the html file. We ended up with an easy-to-understand user interface:

Minimalistic Vue JS (c) Tomasz Waraksa, Dublin, Ireland routing

A less trivial application usually has a large set of views to which users can navigate. It turns out that the Vue router works in our setup without any problems. You can define a view or page as you would 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 use it in index. Add router placeholders to html:

.........

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

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

Now, you can enter URL, using the

< router-link >

Component or navigate to both pages programmatically.

At this point, the study of "case analysis of the use of vue without build" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.