Vue components and applications-create head components
① Create a new file myHeader.vue component under the components folder and delete the remaining helloworld.vue.
Enter the following in myHeader.vue:
Analysis: The myHeader.vue page is divided into three parts:
1. <template></template> is the html code, which is the structural part.
2. The js code in <script></script> is the logical part.
name: "myHeader", name sets the name of the component.
data() is a necessary function.
3. <style></style>css style code. CSS will only act on this component and this page.
②Introduce components in app.vue:
1. Introduced in import.
2. Register components in the components property of export default {}
(Naming convention: capitalize the first letter after import, such as MyHeader.
When used in the template, use a dash to connect, such as <my-header>).
Reuse of components:
Just copy and paste, the components are independent.
Open Google Chrome and press F12, switch to mobile mode to browse, the effect after running:
③Finally modify the css of myHeader.vue, the modified content is as follows:
⑤Now npm run dev runs the project, if an error is reported
* !!vue-style-loader!css-loader?{"sourceMap":true}!
It is because the less file is referenced when setting css, but it is not installed.<style lang="less">
Now start to install the less file.
Enter the project directory in cmd and execute cnpm install --save-dev less-loader less,
After the installation is complete, npm run dev will solve the problem.
