使用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的配置文件

本文链接:

http://godrry.com/archives/initialize-a-vue-project-with-vuecli.html
1 + 6 =
沙发还热乎呢~