Vue-cli创建初始化项目

在之前做的代码都放在一个index中，在Vue开发项目中，我们借助webpage打包工具，构建大型项目的开发目录，然后开发完成后，打包生成线上最终代码。
脚手架工具(Vue-cli)：快速构建标准的Vue项目

# Vue-cli安装：

mac运行命令：
# 全局安装 vue-cli
npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm run dev

window运行命令：
首先先下载node.js然后安装: https://nodejs.org/en/download/
安装完后输入CMD，输入node --version 查看版本号
1、npm install --global vue-cli
2、切换到需要创建的目录，E:   cd Project     cd Vue
   然后输入命令：vue init webpack todolist
3、cd todolist
4、npm run dev

? Project name //项目名称
? Project description A Vue.js project //项目描述，默认的
? Author Bin Xu bin.xu@hinterlands.tech //默认，回车即可
? Vue build (Use arrow keys) //默认，回车即可
? Vue build standalone //默认，回车即可
? Install vue-router? No //是否安装路由
? Use ESLint to lint your code? Yes //是否用ESLint来规范我们的代码
? Pick an ESLint preset Standard
? Set up unit tests No //是否使用自动化的测试工具
? Setup e2e tests with Nightwatch? No
? Should we run npm install for you after the project has been created? (reco
mmended) npm //选择npm安装

安装完之后进入todolist目录cd ~ cd Project/todolist
进入目录后输入命令：npm run dev 启动项目，就会显示Your application is running here: http://localhost:8080

目录和文件夹的作用：
build：放置项目的配置文件webpage。
config：dev环境和prod环境
node_modules：项目的依赖
src：放置源代码
static：静态的资源

#cli实现todolist

template标签中，只能有一个最外层包裹元素。
在script标签中，data是一个函数，而不是一个对象
<style scoped></style> scoped只对当前的component生效，不加scoped对全局生效