vue-cli

构建项目

vue init webpack todo_list //todo_list是自定义的项目名称

? Project name todo_list //项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters）

 

? Project description A Vue.js project //项目描述，也可直接点击回车，使用默认描述

 

? Author XXX<XXXXX@qq.com> //作者<邮箱>

 

? Vue build standalone

 

? Install vue-router? Yes //是否安装vue-router，这是官方的路由，大多数情况下都使用

 

? Use ESLint to lint your code? No //是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的

? Pick an ESLint preset Standard： //上面yes的话，Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，直接y回车

 

? Set up unit tests No //是否安装单元测试

? Pick a test runner jest //上面Yes的话

 

? Setup e2e tests with Nightwatch? No： //是否安装e2e测试 

 

? Should we run npm install for you after the project has been created? (recom

mended) npm

 

 

安装依赖

npm install  //目录中`node_modules`文件夹，放所有依赖的模块。

 

目录结构：

build  //构建脚步目录，保存一些webpack的初始化配置

config  //构建配置目录，项目初始化的配置，包括端口号等

node_modules  //npm加载的项目依赖的模块

src  //源码目录，这里是我们要开发的目录，基本上要做的事情都在这个目录里

- assets  //资源目录，用来放置图片，如logo等

- components  //组件目录，用来放组件文件

- router  //

- app.vue  //是项目入口文件

- main.js   //是项目的核心文件

static   //文件夹用来放置静态资源目录，如图片、字体等。

test   //初始测试目录，可删除

.babelrc babel   //编译参数，vue开发需要babel编译

.gitignore    //用来过滤一些版本控制的文件，比如node_modules文件夹

index.html   //是首页入口文件，你可以添加一些 meta 信息或统计代码啥。

package.json   //是项目配置文件，记载着一些命令和依赖还有简要的项目描述信息

README.md    //项目的说明文档，markdown 格式，介绍自己这个项目的

 

启动项目

npm run dev