vue-cli脚手架一键搭建项目

一、安装步骤

首先电脑上要安装最新版的nodeJS.官网下载，安装完之后安装淘宝npm镜像

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

五部曲：

1､ 打开终端，全局安装vue-cli

npm install -g vue-cli

2､进入目录并初始化项目

vue init webpack blog-client //blog-client是你项目名称

当出现以下提示

image.png

直接按回车，项目描述和作者都默认按回车

image.png

这里直接按回车

image.png

这里按N 或是 Y ,都行，如果按Y，使用vue-router

image.png

3､之后终端会创建 blog-client文件夹及相关文件，进入项目

cd blog-client

4､安装依赖 （老安装不成功，不过也不影响后面的操作）

npm install

5､启动项目

npm run dev

二、目录结构的分析

1、build ：项目构建(webpack)相关代码 （9个）

├── build
│ ├── build.js -------生产环境构建代码
│ ├── check­versions.js ------- 检查node&npm等版本
│ ├── dev­client.js ------- 热加载相关
│ ├── dev­server.js ------- 构建本地服务器
│ ├── utils.js ------- 构建配置公用工具
│ ├── vue­loader.conf.js ------- vue加载器
│ ├── webpack.base.conf.js ------- webpack基础环境配置
│ ├── webpack.dev.conf.js ------- webpack开发环境配置
│ └── webpack.prod.conf.js ------- webpack生产环境配置

2､config：项目开发环境配置相关代码 （环境配置，基本上用不到） 3个

├── config
│ ├── dev.env.js ------- 开发环境变量（看词明意）
│ ├── index.js -------项目一些配置变量
│ └── prod.env.js ------- 生产环境变量

3、node_modules：项目依赖的模块 记忆： （所有的依赖） N多个

├──node_modules

4、src：源码目录 5个

├── src
1
│ ├── assets-------资源目录
│ │ └── logo.png
2
│ ├── components ------- vue公共组件
│ │ └── Hello.vue
3
│ ├──router ------- 前端路由
│ │ └── index.js ------- 路由配置文件
4
│ ├── App.vue -------页面入口文件（根组件）
5
│ └── main.js ------- 程序入口文件（入口js文件）

5、static：静态文件，比如一些图片，mp3，json数据等

└── static
│ ├── .gitkeep

6､其他:

├── .babelrc ------- ES6语法编译配置
├── .editorconfig ------- 定义代码格式
├── .gitignore -------git上传需要忽略的文件格式
├── index.html ------- 入口页面
├── package.json ------- 项目基本信息
├── README.md ------- 项目说明