1. Install vuE-CLI tool and install vue-CLI globally

NPM install -g@vue /cli or YARN Global add @vue/cliCopy the code

2. Create a project

// Create a project named rumenz-demo ➜ vue vue create rumenz-vue vue CLI v4.5.4? Please pick a preset: (Use arrow keys) ❯ Default ([Vue 2] Babel, esLint) Default (Vue 3 Preview) ([Vue 3] Babel, Eslint) Manually select features // Creating projects takes a certain amount of time, depending on your Internet speed, vue-CLI will automatically install some dependenciesCopy the code

Beginners recommend using the Default configuration Default ([Vue 2] Babel, esLint), or Default (Vue 3 Preview) ([Vue 3] Babel, Eslint) Manually select features is the manual configuration option

3. Project structure introduction

.├ ── ├.md ├── Package. json ├─ Public │ ├─ Favicon. Ico │ ├─ public │ ├─ Favicon └ ─ ─ index. The HTML / / template file ├ ─ ─ SRC / / the source directory │ ├ ─ ─ App. Vue │ ├ ─ ─ assets │ │ └ ─ ─ logo. The PNG │ ├ ─ ─ components │ │ └ ─ ─ ├ ─ 07.txt // import file ├ ─ 07.txtCopy the code

4. Open the Rumenz-Vue directory with VS Code and start the project

npm run serve
Copy the code

Open the corresponding link as prompted. If the following interface is displayed, the project is successfully started http://localhost:8080/

5. Introduce the import file rumenz-vue/ SRC /main.js and template file rumenz-vue/public/index.html

rumenz-vue/public/index.html

<! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Name ="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <! <div id="app"></div> <! -- built files will be auto injected --> </body> </html>Copy the code

rumenz-vue/src/main.js

Vue import Vue from 'Vue' // Import app. Vue file from current directory import App from './ app. Vue '// Prevent Vue from starting production message vue.config. productionTip = New Vue({render: h => h(app),}).$mount('#app')Copy the code

6.App.vue source code structure introduction

Three large

<! <template> </template> <! Business logic js--> <script> </script> <! <style> </style>Copy the code

App.vue

<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> < / div > < / template > < script > / / import a custom components import HelloWorld from '. / components/HelloWorld. Vue 'export default {name: }} </script> <style> # App {max-width: 100%; box-sizing: border-box! Important; Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>Copy the code

7. Create an itemone. vue file

<template> <li class="item">{{item}}</li> </template> <script> export default { props:['item'] } </script> <! <style scoped>. Item {color: red; } </style>Copy the code

Using the component

App.vue

<template> <div id="app"> {{msg}} <div> <! <input type="text" v-model="info"> <! - @ click bindings click event - > < button @ click = "handle" > add < / button > < / div > <! <item-one v-for="item in list" :key="item" -- <item-one v-for="item in list"; :item="item"></item-one> </div> </template> <script> // import the above module import ItemOne from './components/ItemOne' export default {name: 'App', data() {return {MSG: "hello ", info: ", list: []}}, methods: { handle(){ this.list.push(this.info); this.info=''; } }, components: { ItemOne } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>Copy the code

The HTML feature is case insensitive. Therefore, the camelCased (camelCased) named prop needs to be converted to the corresponding Kebab-case name when using a non-string template: there are no restrictions if you use string templates.

Project source :github.com/mifunc/rume…