Doubts about learning VUE-CLI
the subject uses VUE for half a year. Before that, html directly introduced the JS file to do it.
<script src="vue.js"></script>
var vm = new Vue({});
recently, I"m a little excited about VUE-CLI. After reading documents, scanning blogs, and watching videos, I finally put up a HELLO_WORLD (see figure).
but it also creates some doubts
- observed that APP.vue contains structure, style, logic, that is to say, use .vue instead of .html;
- the output folder dist does not have a html file, so how can I access these pages? Although I can access it in losthost after typing npm run dev on the command line, I always write an a.html and open it in a browser.
- Project creation is useful to vue init webpack-simple , am I going to learn webpack;
- whether to use Vue Router instead of a tag for transitions between pages;
many doubts, but also hope to teach, thank you.
the learning framework needs to understand how it works. Webpack is the foundation of modern front-end frameworks. Starting from understanding the working logic and compilation process of SPA, you need to know that the html you write is not a real html, they are just html templates, and all web page elements are produced by JavaScript. As for why you do so, I suggest you look for relevant articles to read.
I am also learning vue, so I can share my learning experience with the landlord. Tell me about your question.
- VueCli is dedicated to the Vue framework, which is designed to facilitate development and is different from the traditional HTML+JS+CSS mode of operation. If you want to build a Vue project in regular HTML files and .js files, you need to introduce Vue separately, then instantiate it in JS, build components, and write styles in html or CSS files. Relatively speaking, it is troublesome, and the whole project structure is not clear enough. So .vue can replace writing HTML alone in VueCli, because the content in template has been taken as the content of html.
-
npm run dev is the operation of the development environment, which includes a lot of webpack configuration, so it is different from opening html directly before. npm run build is to package the project. If your project is complete and there is a HTML file in the packaged dist, the landlord can check his own project.
- VueCli has configured webpack in the project to configure plug-ins and build a complete and efficient development environment. Although it is difficult, but as the most popular build tool, it still needs to be gnawed slowly.
- Page jump can be replaced by router in Vue, and many traditional development methods can be abandoned, such as manipulating DOM, which is not needed in Vue projects. I've seen crazy jQuery users in Vue. This makes it feel a little bit like playing basketball on the football field.
,
look at your description of the version of vuecli2.X you use. I use vuecli3.0. Share my experience based on my usage:
1. I personally think that vue is instead of html
2.vuecli3.0 to create the project, there is a public folder in the root directory, index.html is inside, after build, there will be an index.html in the dist folder, this file is the entry
3. In practice, some have done the mobile end, and some have used iview as the vue background management front-end framework, all of which can focus on page development by making simple modifications to vue.config.js (vuecli3.0). What I do is a single page. If it is a page development, it may require more knowledge of webpack
the so-called page jump in 4.vue. I don't think it is similar to a tag jump. It is the change of the router-view loading component in the page, and the process of change is realized through Vue Router.
- .vue is written as a specification, and when packaged, it is compiled by vue-loader in webpack
- executing npm run build packing generates a compiled file in the dist directory. For a single-page application, only one index.html is used as the entry file, the page is routed through vue-router, and the single-page application is routed to the front-end management page.
- you only need to understand the principle of webpack in the early stage. There is no need to delve into it. Webpack configuration is already built into vue scaffolding. If there is a personalized configuration that only needs to be modified in webpack.config.js, the default configuration will be overridden here, which is described in api.
- vue page jump is actually a component switch of vue-router. If you don't jump to an external page, you generally don't need a tag.
Thank you for your answers. The
problem has been raised for more than half a year now, and now it has been proficient in using cli to build projects, mainly using plug-ins such as vue-router + vuex + typescript + e2e:nightwatch, and now two projects have been launched.
now answer the previous question (take the initialization of (cli3) vue create xx as an example).
1 & 4: as far as I understand it, the .vue file is part of the previous .html file, and App.vue is mounted on < div id= "app" > < / div > of index.html and is a component of index.html. Change the components that need to be mounted through vue-router;
2: no recurrence, which may be caused by deleting index.html;
3: according to experience, learning webpack is not a necessary condition, and Baidu can basically solve problems.
thanks again!
