Vue(13) —— 第一个Vue-cli项目

---

1.环境准备

    vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;

    预先定义好的目录结构及基础代码，就比如我们在建立 Maven 项目时能够选择建立一个骨架项目，这个骨架项目就是脚手架,咱们的开发更加的快速;

主要的功能

• 统一的目录结构
• 本地调试
• 热部署
• 单元测试
• 集成打包上线

须要的环境

• Node.js : http://nodejs.cn/download/
  安装就无脑下一步就好,安装在本身的环境目录下
• Git : https://git-scm.com/downloads
  镜像:https://npm.taobao.org/mirrors/git-for-windows/

确认nodejs安装成功

• cmd 下输入 node -v,查看是否可以正确打印出版本号便可!
• cmd 下输入 npm-v,查看是否可以正确打印出版本号便可!

这个npm,就是一个软件包管理工具，就和linux下的apt软件安装差很少!

安装 Node.js 淘宝镜像加速器（cnpm）

• 这样子的话,下载会快不少~

# -g 就是全局安装
npm install cnpm -g

# 或使用以下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org

解决无法安装cnpm，cnpm卡顿问题.

安装过程可能有点慢~,耐心等待!虽然安装了cnpm,可是尽可能少用!

安装的位置:C:\Users\用户名\AppData\Roaming\npm

安装 vue-cli

cnpm install vue-cli -g

# 测试是否安装成功
# 查看能够基于哪些模板建立 vue 应用程序，一般咱们选择 webpack
vue list

---

2.第一个 vue-cli 应用程序

1. 建立一个Vue项目,咱们随便创建一个空的文件夹在电脑上,我这里在D盘下新建一个目录D:\Project\vue-study;

2. 建立一个基于 webpack 模板的 vue 应用程序

   # 这里的 myvue 是项目名称，能够根据本身的需求起名
   vue init webpack myvue
   

   一路都选择no便可
   
   

---

初始化并运行

cd myvue
npm install
npm run dev

执行完成后，目录多了不少依赖

• 测试项目是否搭建成功
  
  
  项目搭建成功！
  停止项目运行
  
  
  

• 使用IDEA打开我们初始化的vue项目
  

---

认识vue项目的目录结构

• build 和 config：WebPack 配置文件【就是项目打包发布的配置文件】
  
  

• node_modules：用于存放 npm install 安装的依赖文件【和Java项目的lib目录功能类似】

• src： 项目源码目录【我们写前端的源代码存放的目录，这和maven一样】

• static：静态资源文件【我们可以直接访问到，如html、js、css和图片等文件】

• .babelrc：Babel 配置文件，主要做用是将 ES6 转换为 ES5

• .editorconfig：编辑器配置

• eslintignore：须要忽略的语法检查配置文件

• .gitignore：git 忽略的配置文件

• .postcssrc.js：css 相关配置文件，其中内部的 module.exports 是 NodeJS 模块化语法

• index.html：首页，仅做为模板页，实际开发时不使用
  

• package.json：项目的配置文件

  • name：项目名称
  • version：项目版本
  • description：项目描述
  • author：项目作者
  • scripts：封装经常使用命令
  • dependencies：生产环境依赖
  • devDependencies：开发环境依赖