Vue实战1-环境搭建

初始化项目

这里我们使用vue-cli来自动生成vue.js项目的模板。

1. 安装Node.js

2. 用npm安装vue-cli

npm install -g vue-cli

可能会提示权限的问题，需要授权

sudo chmod -R 777 /usr/local/lib

3. 使用vue-cli

vue init webpack

vue为我们提供了两个模板，webpack和webpack-simple，webpack-simple比较适合小项目，这里我们用webpack。

4. 安装依赖并运行

npm install
npm run dev

项目结构

我们下面来看一下项目目录下这一堆东西分别是什么。

.
├── build/                      # webpack config files
│   └── ...
├── config/
│   ├── index.js                # main project config
│   └── ...
├── src/
│   ├── main.js                 # app entry file
│   ├── App.vue                 # main app component
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)
│       └── ...
├── static/                     # pure static assets (directly copied)
├── .babelrc                    # babel config
├── .postcssrc.js               # postcss config
├── .eslintrc.js                # eslint config
├── .editorconfig               # editor config
├── index.html                  # index.html template
└── package.json                # build scripts and dependencies

build/

这个目录包含开发环境和生产环境Webpack的实际配置。通常不需要修改这些文件。

config/index.js

这是主配置文件，是build的通用配置选项。包括开发环境

src/

这是你主要代码的所在位置，也包括assets。

static/

这里是不需要用Webpack处理的静态资源。

index.html

这是我们单页面应用程序的模板。在开发和构建期间，Webpack将生成资产，并将生成资产的url自动注入到此模板中呈现出最终的html。

package.json

包含所有构建依赖项和构建命令的npm软件包元文件。