image.png
发布：
image.png
image.png
进入命令行控制台
ctrl+R
cmd
更新脚手架
cnpm i -g @vue/cli
如上的前置条件是 安装nodejs、配置cnpm、安装vue-cli。
image.png
进入项目工作空间 ，准备新建脚手架项目。
cd F:\workspace\vue_workspace
F:
vue create hello-world
image.png
这里我们选择默认的vue2即可。
Default ([Vue 2] babel, eslint)
生成的目录结构如下：
image.png
现在要将如下代码改成vue-cli的代码形式：
<!DOCTYPE html>
<html lang="ch-Zn">
<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">
<title>Document</title>
</head>
<body>
<div id="app">
{{message}}
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id">
</todo-item>
</ol>
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('todo-item', {//表示组件名称叫“todo-item”
props: ['todo'],//接收的属性叫tudo
template: '<li class="text">{{todo.text}}</li>'//模板叫这个
})
var app = new Vue({
el: '#app',
data: {
message: 'hello Vue!',
groceryList: [{
id: 0,
text: '蔬菜'
}, {
id: 1,
text: '奶酪'
}, {
id: 2,
text: '干果'
},
]
}
})
</script>
</html>
新增TodoItem.vue文件。
image.png
/*************结构 *************/
<template>
<li class="text">
{{todo.text}}
</li >
</template>
/*************逻辑 *************/
<script>
export default {
props:['todo'],
}
</script>
/************* 样式 *************/
<style scoped>
.text{
color: #42b983;
}
</style>
网友评论