Vue构建一个项目

vue2.0 推荐开发环境

Homebrew 1.0.6(Mac)
Node.js 6.7.0
npm 3.10.3
webpack 1.13.2
vue-cli 2.4.0
Atom 1.10.2

构建vue项目

1、下载node.js

1. 下载地址：https://nodejs.org/en/
2. 检查是否安装成功：如果输出版本号，说明我们安装node环境成功
   

node是自带npm的，如果npm不是最新版本可以执行以下命令更新：

$  npm install npm -g

大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm i -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

cnpm install [name]
cnpm i [name]

安装项目依赖：一定要从官方仓库安装，npm 服务器在国外所以这一步安装速度会很慢。

npm install

不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)

cnpm install

安装webpack：

$  cnpm install webpack -g

安装vue-cli：

$  npm install vue-cli -g

初始化vue项目：

$ vue init webpack testpro
//  vue inti webpack "项目名"
? Project name (testpro)
//  敲回车即可
? Project description (A Vue.js project)
//  敲回车即可
? Author (Serena-tz <71140697+Serena-tz@users.noreply.github.com>)
//  敲回车即可
？ Vue build ( user arrow Keys ) 
> Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific TML) are ONLY allowed in .vue files - render functions are required elsewhere
//  敲回车既可
? Install vue-router? (Y/n)
//  敲Y回车既可 （是否安装路由）
? Use ESLint to lint your code? (Y/n)
//  敲Y回车既可
? Pick an ESLint preset (Use arrow keys)
> Standard (https://github.com/standard/standard)
  Airbnb (https://github.com/airbnb/javascript)
  none (configure it yourself)
//  敲回车既可
? Set up unit tests (Y/n)
//   单元测试
?  Pick a test runner (Use arrow keys)
> Jest
  Karma and Mocha
  none (configure it yourself)
? Setup e2e tests with Nightwatch? (Y/n)
//   e2e测试
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself
//  选择安装方式，按回车等待安装即可

vue项目目录解析

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。components: 目录里面放了一个组件文件，可以不用。App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。main.js: 项目的核心文件。index.css: 样式文件。
static	静态资源目录，如图片、字体等。
public	公共资源目录。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

1、build：构建脚本目录

1. build.js ==> 生产环境构建脚本；
2. check-versions.js ==> 检查npm，node.js版本；
3. utils.js ==> 构建相关工具方法；
4. vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；
5. webpack.base.conf.js ==> webpack基本配置；
6. webpack.dev.conf.js ==> webpack开发环境配置；
7. webpack.prod.conf.js ==> webpack生产环境配置；

2、config：项目配置

1. dev.env.js ==> 开发环境变量；
2. index.js ==> 项目配置文件；
3. prod.env.js ==> 生产环境变量；

3、node_modules：npm 加载的项目依赖模块
4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

1. assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
2. components：组件目录，我们写的组件就放在这个目录里面；
3. router：前端路由，我们需要配置的路由路径写在index.js里面；
4. App.vue：根组件；
5. main.js：入口js文件；

5、static：静态资源目录，如图片、字体等。不会被webpack构建
6、index.html：首页入口文件，可以添加一些 meta 信息等
7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息
8、README.md：项目的说明文档，markdown 格式
9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等