vue 前期准备，项目结构

环境

1、node -v 检测
      没有就下载node，装到C盘           http://nodejs.cn/download/      
2、vue -v 检测 
      没有就 npm install -g @vue/cli 或者 yarn global add @vue/cli   安装脚手架
       网址 https://cli.vuejs.org/zh/  也可以从网址里找到安装命令
3、之后就可以使用vue ui 或者 vue create 项目名称——创建项目（建议vue ui，看着方便）

 

 

 

 

 图片中省略的部分就是不用设置

4、之后就可以npm run serve 打开项目了（要在项目这个文件夹中使用指令）

## 包管理工具  （包等于插件vue，echars）

 npm

npm 是nodejs软件自带的一个包管理工具，由于是外国人写的，它默认下载文件的地址是国外的，所以很慢，修改成国内的下载地址 npm淘宝镜像

检测：`npm config get registry`

 yarn

安装：https://yarn.bootcss.com/docs/

yarn 必须基于nodejs运行。属于第三方的下载包的管理器

优点：比npm快很多 

【注意】两者只能用一个，下载依赖的时候只能用一个，启动项目或打包的时候没有区别。

### npm和yarn 的常用命令

#### 初始化安装依赖

项目里必须由package.json文件

- yarn install

- npm i `#` install缩写 i

-  从线上拿到的项目没有node_modules包，就需要初始化

【注意】cmd窗口如果停止下载了。鼠标点击窗口敲回车

#### 初始化npm环境

- npm init -y

#### 安装依赖

- npm i pageName

- yarn add packName

### 卸载包

- npm uninstall packName

- yarn remove packName

 

### 依赖包的环境

环境=== 范围=== 作用域

全局安装依赖的命令

#### 全局环境

举例` npm i - g jquery`

#### 开发环境   npm run serve

编译scss的，编译es6的babel，编译vue文件的loader仅仅用于开发环境，浏览器里是用不到的，我们使用- `D`安装

举例：`npm i -D scss scss-loader`

#### 生产环境   npm run build

- `S`表示生产环境

vue,jquery,axios,ajax等都是运行在浏览器中的，需要

 

## 项目创建

nodejs+vue+cli环境准备好了后，可以创建项目了

### 使用图形化创建

`vue ui`

### 使用命令行创建

`vue create name`

 

### 安装scss

npm i -D sass sass-loader

yarn  add -D sass sass-loader

// 卸载
npm uninstall --save sass-loader
// 安装
npm install -D sass-loader@7.x
 

 

# 项目结构

- node_modules 项目运行时需要的所有依赖（可以删除，只要有package.json就可以重置）

- public 公共目录，打包的时候就原格式输出，里面存放的是单页面html和网站的icon

- src 【重要】

  源码，必要的文件main.js，是入口文件，全局文件，项目运行是执行的第一个文件

- package.json【重要】

  运行命令和所有依赖清单文件

- gitignore 过滤git储存的清单，不想让某个文件存入git仓库，就把他写在清单里

- bable.config.js 把es6语法编译成es5 

- README.md 项目描述文件

- vue.config.js 对当前项目vue脚手架的扩展

  功能：打包的二级目录 ，利用nodejs做跨域请求proxy，关闭打包时的代码映射文件