vue 从零搭建项目

一、列表内容

本地开发需要哪些工具

1. node.js (>=4.x, 6.x preferred),以及npm包管理器。（可以使用国内淘宝的cnpm）。
2. webpack 前端构建工具，将vue 模板编译打包处理的工具
   Webpack是当下最热门的前端资源模块化管理和打包工具，它可以将很多松散的模块按照以来以及一定的规则打包成符合生产环境的前端资源。同时，它还具有按需加载，等到实际需要的时候进行异步加载。通过loader的转换，在项目中任何形式的资源都可以被理解为模块。比如图片、css、less、sass等等。
3. vue-cli vue脚手架工具，用来生成vue工程

二、搭建vue工程

---

注意：命令行最好以管理员模式启动

---

1、 vue-cli

 vue-cli是vue官方所提供的一个脚手架工具，这里面默认继承了express以及webpack打包工具。

安装vue-cli

npm install -g vue-cli

2、初始化项目 vue init

vue init webpack sell

初始化的构建工具选用webpack，sell是项目的名字，还有一些配置项的设置（如下图）

初始化完sell这个项目后，

   cd sell (进入sell文件夹)   npm install  (将内部的依赖进行安装)   npm run dev (开始dev环境)

运行npm run dev之后，浏览器上出现下面的页面表示安装成功

三、项目工程分析

• build：webpack的一些配置文件以及服务启动文件
• config：多为build中所依赖的文件
• src: 页面以及逻辑文件夹
• static: 字体以及公共样式文件夹
• index.html: 主文件入口
• package.json: npm依赖以及开发生产环境所以来的模块包
• README.md: 解释说明一下本项目是做什么的

webpack配置项详细可参考