1.装置vue-cli工具,全局装置vue-cli

npm install -g @vue/cli或者yarn global add @vue/cli

2.创立一个我的项目

//创立一个名字为rumenz-demo的我的项目➜  vue vue create rumenz-vueVue 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//创立我的项目须要肯定的工夫,工夫长短取决于你的网速,vue-cli会联网主动装一些依赖
初学者倡议应用默认的的配置Default ([Vue 2] babel, eslint),当然也能够抉择Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features为手动配置选项

3.我的项目构造介绍

.├── README.md├── babel.config.js├── package.json     // 依赖模块的清单├── node_modules    //我的项目的依赖├── public         │   ├── favicon.ico│   └── index.html //模版文件├── src           //源代码目录│   ├── App.vue│   ├── assets│   │   └── logo.png│   ├── components│   │   └── HelloWorld.vue│   └── main.js   //入口文件└── yarn.lock

4.用vs code关上rumenz-vue目录,启动我的项目

npm run serve

依据控制台提醒关上对应的链接,如果显示以下界面,则示意我的项目启动胜利
http://localhost:8080/

5.入口文件rumenz-vue/src/main.js和模版文件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 %>favicon.ico">    <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>

rumenz-vue/src/main.js

//导入Vueimport Vue from 'vue'//导入当前目录下的App.vue文件import App from './App.vue'//阻止vue启动生产音讯Vue.config.productionTip = false//创立一个Vue,并挂载到模版index.html的<div id="app"></div>下new Vue({  render: h => h(App),}).$mount('#app')

6.App.vue源代码构造介绍

三大块

<!--页面构造--><template></template><!--业务逻辑js--><script></script><!--款式--><style></style>

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 HelloWorld from './components/HelloWorld.vue'export default {  name: 'App',  components: {    HelloWorld //必须要注册导入的组件,不然无奈应用  }}</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>

7.创立一个组件
创立ItemOne.vue文件

<template>     <li class="item">{{item}}</li></template><script>export default {    props:['item']}</script><!--scoped款式部分作用--><style scoped>.item{   color: red;}</style>

应用组件

App.vue

<template><div id="app">   {{msg}}    <div>        <!--v-model绑定到info变量上-->        <input type="text" v-model="info">        <!--@click绑定点击事件-->        <button @click="handle">增加</button>    </div>    <!--必须绑定:key :item示意组件ItemOne.vue的定义的变量,通过的属性的形式传递值到子组件-->    <item-one v-for="item in list" :key="item" :item="item"></item-one></div></template><script>//导入下面的模块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>
对于自定义标签item-one的阐明,官网上这样说：HTML个性是不辨别大小写的。所以，当应用的不是字符串模板，camelCased（驼峰式）命名的prop须要转换为绝对应的kebab-case（短横线隔开式）命名：如果你是用字符串模板，则没有这些限度。

我的项目源码:https://github.com/mifunc/rum...