使用vue-cli初始化一个vue项目

更多的信息可以去github vue-cli仓库去查看

安装vue-cli

npm install -g vue-cli

初始化

在对应文件目录进行初始化

vue init <template-name> <project-name>

<template-name>有以下模板:

• webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
• webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
• browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
• browserify-simple - A simple Browserify + vueify setup for quick prototyping.
• pwa - PWA template for vue-cli based on the webpack template
• simple - The simplest possible Vue setup in a single HTML file

Build Setup

#进入项目根目录
cd 你项目的名称

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

webpack-simple模板下的文件说明

src 源代码
src/assets   存储静态资源 （图片，样式）
src/App.vue  单文件组件  -- 根组件
src/main.js  入口文件

index.html  单文件首页

.babelrc   是babel这个工具的配置文件，babel是用来把ES6->ES5
.editorconfig  编辑器的配置文件
.gitignore  git的忽略文件
webpack.config.js   webpack的配置文件