Vue （目录结构、 安装）

安装

打开终端

cd ~/Desktop
npm install -g vue-cli
vue init webpack blog-client

红色框选出的区域 注意 yes 和 no 的选择

之后终端会创建 blog-client 文件夹 以及相关文件 执行

cd blog-client
npm run dev

一般情况下会报错
【注意！报错提示缺少什么就安装什么就好】
没有其他技巧

！！！每个人遇到的情况不一样 以下只是学习方法

例如：

输入命令：npm run dev
发现报错 缺少 webpack-dev-server
（都告诉你 缺少了 不安装等什么？？？等它自己长出来吗）

---

安装 webpack-dev-server
输入命令：npm install webpack-dev-server --save-de

---

再输入运行命令：npm run dev
又发现报错：缺少 webpack
（安呗。。。）
安装 webpack
输入命令：npm install webpack
（安装完成的 不截图了 懒）

---

再输入运行命令：npm run dev
又又发现报错：缺少 extract-text-webpack-plugin
（继续安呗。。。）
安装 extract-text-webpack-plugin
输入命令：npm install extract-text-webpack-plugin
（安装完成的 不截图了 懒）

---

安装后 继续输入运行命令：npm run dev
继续安装缺少文件

循
环

循
环

循
环

直
到

可爱的它出现...

---

生成的结构目录如下

文件夹类

build

webpack相关配置文件
一般情况下不需要自己配置

config

vue基本配置文件
可配置端口号
打包输出等

node_modules

依赖包
也就是运行cnpm install 安装的所有组件都在这里

src

项目核心文件
自己写的代码基本都放在这里面

static

静态资源
一般图片类资源都放在这里

文件类

.babelrc --- babel编译参数

.editorconfig --- 代码格式

gitignore --- git上传需要忽略的文件配置

.postcssrc.js --- 转换css的工具

index.html --- 主页

package.json --- 项目基本信息及项目依赖关系

README.md --- 项目说明