1.装置vue-cli工具,全局装置vue-cli
npm install -g @vue/cli
或者
yarn global add @vue/cli
2.创立一个我的项目
//创立一个名字为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
//创立我的项目须要肯定的工夫,工夫长短取决于你的网速,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
//导入Vue
import 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…
发表回复