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
- 下载地址：https://nodejs.org/en/
- 检查是否安装成功：如果输出版本号，说明我们安装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 <[email protected]>)
// 敲回车即可
？ 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：构建脚本目录
- build.js ==> 生产环境构建脚本；
- check-versions.js ==> 检查npm，node.js版本；
- utils.js ==> 构建相关工具方法；
- vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；
- webpack.base.conf.js ==> webpack基本配置；
- webpack.dev.conf.js ==> webpack开发环境配置；
- webpack.prod.conf.js ==> webpack生产环境配置；
2、config：项目配置
- dev.env.js ==> 开发环境变量；
- index.js ==> 项目配置文件；
- prod.env.js ==> 生产环境变量；
3、node_modules：npm 加载的项目依赖模块
4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
- assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
- components：组件目录，我们写的组件就放在这个目录里面；
- router：前端路由，我们需要配置的路由路径写在index.js里面；
- App.vue：根组件；
- main.js：入口js文件；
5、static：静态资源目录，如图片、字体等。不会被webpack构建
6、index.html：首页入口文件，可以添加一些 meta 信息等
7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息
8、README.md：项目的说明文档，markdown 格式
9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等