Codewords are not easy, and helpful students hope to pay attention to my WeChat official account: Code Program Life, thanks!
Before this, we have basically finished the basic part of vue.
Our previous process of writing vue components is
Vue.component("组件名", {
});
new Vue({
components:组件名
});
This method works well in many small and medium-sized projects, where JavaScript is only used to enhance specific views. But when in more complex projects, or when your front end is completely driven by JavaScript, the following shortcomings will become very obvious:
- Global definitions require that the names in each component must not be repeated
- String templates lack syntax highlighting . When there are multiple lines in HTML, ugly ones are needed.
- No CSS support (No CSS support) means that when HTML and JavaScript are componentized, CSS is obviously missed
- No build step (No build step) restrictions can only use HTML and ES5 JavaScript, but cannot use preprocessors such as Pug (formerly Jade) and Babel
The single file component with the file extension .vue provides solutions to all the above problems, and you can also use build tools such as webpack or Browserify.
The advantages of single-file components using the .vue suffix are:
- Full syntax highlighting
- CommonJS module
- Component scoped CSS
Vue provides us with a very useful scaffolding tool Vue-Cli3, which can complete the directory structure of the basic part of the project initialization for us.
Let's talk about its basic configuration:
- Install Nodejs to
ensure that Nodejs 8.9 or higher.
Terminal output node -v to ensure that the installation is complete - Install Taobao mirror source
npm install -g cnpm --registry=https://registry.npm.taobao.org
later npm can be replaced with cnpm
(because most people use npm to download things very slowly, Taobao mirror cnpm can give us Download the same thing, and it's faster.) - Install Vue Cli3 scaffolding
cnpm install -g @vue/cli - Check if its version is correct
vue --version
Rapid prototyping
use vue serveand vue buildcommand of a single *.vuefile for rapid prototyping, but it needs to install an additional global expansion:
cnpm install -g @vue/cli-service-global
vue serve The disadvantage is that it needs to install global dependencies, which makes its consistency on different machines not guaranteed. So this is only suitable for rapid prototyping.
Just need a App.vuefile:
<template>
<div>
<h2>hello world 单页面组件</h2>
</div>
</template>
<script>
export default {
};
</script>
<style></style>
Then in the App.vuerun directory files are located:
vue serve
The above content is just the process of rapid prototyping and development of this single-file component with the .vue suffix .
The next article tells about the process of using our Vue-Cli3 to build the project directory when we are developing a complete project .
There is a WeChat mini program course design, complete design needs, contact personal QQ: 505417246
Pay attention to the following WeChat public account, you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full stack, Nodejs, Python and other practical learning materials. The
latest and most complete front-end knowledge summary and project source code will be released to the WeChat public as soon as possible No., please pay attention, thank you!
