三、vue脚手架工具vue-cli的使用

1.vue-cli构建

  vue-cli工具构建:https://blog.csdn.net/u013182762/article/details/53021374

  npm的镜像替换成淘宝

2.项目运行

在项目目录中,运行命令 npm run dev ,也可以运行npm run start(在package.json文件中可以看到),项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)

3.项目分析

目录结构:http://www.runoob.com/vue2/vue-directory-structure.html

我们只关注src下的

main.js是整个项目的入口文件,创建了一个vue实例

  挂载点:#app,

  注册了一个局部组件:App,采用es6的语法import app from './App',引入了App组件在当前路径下App.vue

    components: { App }说明:components: { App :  App },如果建和值相同,可以简写components: { App }

  模板是App组件的内容<App/>

    template: '<div><App/></div>':外层的div可以省略,显示的内容为App组件的template

三、vue脚手架工具vue-cli的使用

在index.html上定义了app挂载点

三、vue脚手架工具vue-cli的使用

App.vue:单文件组件包含三部分,template、script、style

三、vue脚手架工具vue-cli的使用

三、vue脚手架工具vue-cli的使用

 注意:

  1.在template下只能有一个最外层的包裹标签,如果写多个编译会报错,可以把多个标签元素包裹在一个根标签下面;

  2.export也是es6的语法,在vue实例中以前data是一个对象,而在vue-cli中data是一个函数,而且可以简写data : function (){}为data (){},其他也可以简写

export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App , test it .'
}
},
components:{
},
methods:{
}
}

  3.组件的调用可以通过import引入,并且在export中通过components进行声明

import TodoItem from './components/TodoItem.vue';
components:{
'todo-item': TodoItem
},

  4.在style上可以添加scoped来声明此样式为局部样式,只在这个组件的范围有效,不会影响全局样式,建议单页面开发一般加上scoped

<style scoped>
上一篇:用vue快速开发app的脚手架工具


下一篇:【vue系列之一】使用vue脚手架工具搭建vue-webpack项目