cli vue webpack 实战_Vue实战1-环境搭建

初始化项目

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

安装Node.js

用npm安装vue-cli

npm install -g vue-cli

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

sudo chmod -R 777 /usr/local/lib

使用vue-cli

vue init webpack

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

安装依赖并运行

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软件包元文件。