Detailed description of Vuejs single file component instances and vuejs component instances

Detailed description of Vuejs single file component instances and vuejs component instances

In the previous instances, we all use Vue. the component or components attribute is used to define components. This method is fine for many small and medium sized projects. However, in complex projects, the following disadvantages are obvious:

String template: it lacks highlighting and is difficult to write, especially when multiple HTML lines are used. Although the template can be written in an html file, it is too invasive and is not conducive to component decoupling.

CSS is not supported: It means CSS is obviously omitted when HTML and JavaScript are componentized.

No Build Steps: only HTML and ES5 JavaScript are allowed, rather than pre-processors.

The. vue extension provided by Vuejs provides a solution for all the above problems.

Initial ticket file component

To do this, you must first sharpen the source code in the tool and create the hello. vue file in the src directory. The content is as follows:

<Template> 

Then introduce and use in app. js:
// ES6 introduces the module syntax import Vue from 'vue '; import hello from '. /hello. vue '; new Vue ({el: "# app", template:' 
In this case, the project cannot run because. the webpack of the vue file cannot be anything else. It must be handled by the corresponding vue-loader, and you will find hello. ES6 syntax is used in vue. In this case, the corresponding syntax conversion loader is used to convert ES6 into ES5 syntax compatible with mainstream browsers. here we need to use the babel tool officially recommended. First install the required loader:
# Hello. css is used in the vue file, so css-loader is required for processing, vue-loader automatically calls npm install vue-loader css-loader babel-core babel-preset-env -- save-dev
Some people are confused about usingbabel-loader Why do we need to install the following tools? This is because many tools are independent. loader is only used to work with webpack. Herebabel-core Andbabel-preset-envIs the core of ES6 to ES5.
Modify webpack. config. js as follows:
Module. exports = {//... module: {// configure the loader rules used to process files with different suffixes: [{test :/. vue $/, loader: 'vue-loader '}, {test :/. js $/, loader: 'babel-loader '}]}
For babel configuration, we also need to create the. babelrc file under the root directory of the project to configure Babel presets and other related plug-ins. The content is as follows:
{ "presets": [ "env" ]}
However, even though all configurations are complete, the project still reports an error as follows:
ERROR in ./src/hello.vueModule build failed: Error: Cannot find module 'vue-template-compiler'
Some people are not happy, obviously according to the official prompt installed dependencies, and correct configuration, why is it still reported an error? Do not be afraid of errors. Read the error first. It is easy to find out because Cannot find module 'vue-template-compiler 'is becausevue-loader When processing the. vue file, you also need to rely onvue-template-compiler Tool.
At the beginning, I did not know why the official website did not directly tell the user to install this dependency. By reading vue-loader, I realized that the package. json file containsvue-template-compilerAndcss-loaderAs peerDependencies, while peerDependencies during installation, does not automatically install (npm@3.0 +), will only give related warnings, so this requires us to manually install, of course in. if CSS needs to be written in the vue file, css-loader must also be used, which is also in peerDependencies. Discussion: https://github.com/vuejs/vue-loader/issues/1158
If you know the problem, install it directly:
npm install vue-template-compiler css-loader --save-dev
Run the project again. Our content is displayed on the page, and no error is reported. OK. Success ~
Use a Preprocessor
We have learned to write css in. vue. What if sass pre-processor is used? First install the modules mentioned in the previous article:
npm install sass-loader node-sass --save-dev
The configuration only takes two steps:
Modify vue-loader configuration in webpack. config. js
Module. exports = {//... module: {// configure the loader rules used to process files with different suffixes: [{test :/. vue $/, loader: 'vue-loader ', options: {loaders: {// You can also use the serialization method here, but it is not conducive to custom parameter configuration // scss: 'vue-style-loader! Css-loader! Sass-loader 'scss: [{loader: 'vue-style-loader '}, {loader: 'css-loader'}, {loader: 'sass-loader '}] }}, //...]}
Add the style label to the. vue File lang="scss"Attribute.
After the configuration, you can write the sass syntax happily in the. vue file.
Load the global settings file
In actual development, when writing sass files, we often extract global scss variables and place them in a separate file, but this poses a problem, every component that needs to be used must be manually@import './styles/_var.scss' Come in, very unfriendly. Plug-inssass-resources-loader To solve this problem, first install:
npm install sass-resources-loader --save-dev
Modify the vue-loader configuration in the webpack. config. js file:
//... {Test :/. vue $/, loader: 'vue-loader ', options: {loaders: {scss: [{loader: 'vue-style-loader'}, {loader: 'css-loader '}, {loader: 'sass-loader'}, // check it here. Check it here {loader: 'sass-resources-loader ', options: {// The resources attribute here is an array. You can put multiple resources: [resolve ('. /src/styles/_ var. scss ')]} //...
The configuration is complete. Let's test it again.
Create the hello1.vue and hello2.vue files in the src directory respectively:
<! -- Hello1.vue --> <template> 

Create a styles directory and create a new file named _ var. scss:
$green: rgb(41, 209, 41);$red: rgb(177, 28, 28);
Next, two components are referenced in app. js:
import Vue from 'vue';import hello1 from './hello1.vue';import hello2 from './hello2.vue';new Vue({ el: "#app", template: '<div>
Run the project again.
Scoped style
A single file component provides us with a very convenient function, that is, when the style label adds the scoped attribute, the style in the label will only apply to the elements in the current component.
In the preceding example, the h1 color in hello1.vue is not the desired $ green color, but is overwritten by the style in hello2.vue. Therefore, the scoped attribute is added to the style labels of hello1.vue and hello2.vue respectively, as follows:
<!-- hello1.vue --><stylelang="scss"scoped>h1 {color: $green;}</style><!-- hello2.vue --><stylelang="scss"scoped>h1 {color: $red;}</style>
In this way, the colors of the two h1 labels are normal.
Custom Block
When writing some open-source components, sometimes we need to maintain multiple components and component descriptions at the same time, but each modification requires simultaneous modification of the. vue and. md files, which is quite troublesome. . The custom language block function of the vue file allows us to write the markdown description at the same time. in the vue file, and then extract the description separately to the corresponding section through the plug-in. in the md file, you can maintain the instructions and component functions at the same time.
For example, modify the hello1.vue file as follows:
<Docs> # title this is the title content, [repository address] (https://github.com/yugasun/You-Dont-Know-Vuejs) # sub-title this is sub-title content </docs> <template> 

Then modify the webpack. config. js Configuration:
Const path = require ('path'); // introduce the relevant plug-in const ExtractTextPlugin = require ('extract-text-webpack-In in'); function resolve (dir) {return path. resolve (_ dirname, dir);} module. exports = {// entry file entry :'. /src/app. js', // compile the output file output: {path: resolve ('. /'), filename: 'build. js'}, resolve: {alias: {// because we use the require method here, we should use vue. common. js/vue. js/vue. min. js 'vue $ ': 'vue/dist/vue. common. js'}, devServer: {// here, the root directory of the web service enabled by webpack-dev-server is defined as contentBase: resolve ('. /')}, module: {// The loader rules: [{test :/. vue $/, loader: 'vue-loader ', options: {loaders: {scss: [{loader: 'vue-style-loader'}, {loader: 'css-loader '}, {loader: 'sass-loader'}, {loader: 'sass-resources-loader ', options: {resources: [resolve ('. /src/styles/_ var. scss ')]}], docs: ExtractTextPlugin. extract ('raw-loader ') }}, {test :/. js $/, loader: 'babel-loader '}]}, plugins: [new ExtractTextPlugin ('docs. md ')]}
Here we use extract-text-webpack-plugin Export the text plug-in, andraw-loader , Respectively.
Then run the build commandnpm run build At the end of the operation, a docs. md file is generated under the root directory. This is the instruction document we want to write.
Click to view source code: https://github.com/yugasun/You-Dont-Know-Vuejs/tree/master/chapter2/2
Summary
The above is a detailed description of the Vuejs single file component instance introduced by xiaobian. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!