Vue 全家桶之 vue cli (脚手架)

一、Vue cli 简介

cli --------------------- c : command (命令) l : line ( 行 ) i : interface ( 接口 )

命令行接口

命令行界面（英语：command-line interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（CUI）。

vue cli ---------------- vue 的命令行接口通过命令行的方式输入命令使用vue cli （仅仅提供几个命令句，创建一个脚手架项目）

以后在开发的过程中，要先通过 vue cli 提供的命令创建一个 vue 的项目，这个vue 项目存在脚手架规范，基于这个规范去开发变得更加灵活

官方定义： Vue.js 开发的标准工具

二、为什么使用 cli （vue cli 的优势）

【1】 Vue cli 是一个基于Vue.js进行快速开发的完整系统 。使用 Vue1脚手架之后我们开发的页面将是一个完整的系统（项目）。

【2】通过vue cli可以搭建一个交互式的脚手架。（在命令行输入命令，系统会询问：是否...的）

【3】vue cli 开发，创建项目之后直接进行 vue 的开发。

【4】vue cli 开发，项目中的依赖可以随时升级 , 只需要一条命令即可

【5】基于 webpack (打包工具) 构建，并带有合理的默认配置 -------------聚合单页面和各种开发的组件

【6】集成了前端最好的生态工具！（1、webpack 2、es6 语法自动转为 es5 的语法 3、 nodejs------js的服务器 4、支持热部署）

【7】vue cli 3.x ----------- 一套完全图形化的创建和管理 vue.js 项目的用户界面

三、使用 vue cli

【1】vue cli 的使用

a、安装nodejs（包管理工具）

1、下载nodejs安装包
2、解压缩 nodejs
3、配置nodejs环境变量     在Path中添加nodejs目录
4、重启cmd    输入node -v   出现版本号即可
5、node 提供了一个 npm 的命令         node package manager  ---------nodejs 的包管理工具

b、node 将所有的 js 库归纳到一起

通过坐标管理

npm install XXX;     //默认下载最新版本
npm install XXX@3.1.1;         //下载指定版本

将会自动联网，从前端库中下载 XXX 到项目中,存入本地仓库，提高速度

c、设置本地仓库

npm config set cache "D:\nodereps\npm-cache";  //下载本地缓存
npm config set prefix "D:\nodereps\npm-global";  //下载本地仓库

d、设置下载镜像

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

e、执行 npm config ls

npm  config ls

f、安装 vue cli

npm install -g @vue/cli;      ----安装3.x

npm install -g vue-cli;       ----安装2.x

将脚手架下载到本地仓库

第一种、通过 cli 创建项目

a、配置nodejs本地仓库环境变量

b、测试命令能否执行

vue init

c、选择一个项目目录

vue init webpack x

d、运行这个项目

cd project
npm run dev

e、浏览器访问该项目

http://localhost:8080

第二种、快速创建一个vue cli 项目

安装nodejs 后

一、全局化安装cnpm

其实对于安装vue-cli，使用npm命令和cnpm命令都是可以的，个人觉得使用npm安装的比较慢，而且很可能会因为网络问题而出错，所以还是觉得使用cnpm稳一点。

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

（1）全局安装 vue-cli ，在命令提示窗口执行：

cnpm install -g vue-cli

（2）安装vue-cli成功后，通过cd命令进入你想放置项目的文件夹，在命令提示窗口执行创建vue-cli工程项目的命令：

vue init webpack 项目名称

确认创建项目后，后续还需输入一下项目名称、项目描述、作者、打包方式、是否使用ESLint规范代码等等，详见上图。安装顺利执行后会，生成如下文件目录：

（3）生成文件目录后，使用 cnpm 安装依赖

 cnpm install

四、目录结构及其对应作用

├── build/                      # webpack 编译任务配置文件:用来存放对项目的构建项目配置 用来配置生产环境和测试环境
│   └── ...
├── config/                     #用来修改生产配置 和 测试配置 核心目录 ---------推荐默认
│   ├── index.js                # 入口js 项目核心配置
│   └── ...
├ ── node_module/               #项目中安装的依赖模块
── src/                      #存放自己日后开发代码目录  重点
│   ├── main.js                 # 程序入口js文件
│   ├── App.vue                 # 根组件
│   ├── components/             # 组件  用来开发项目中的组件
│   │   └── ...
│   └── assets/                 # 资源文件夹，放置一些静态资源，通常将静态资源放这里（css img viedo mp3 等等）
│       └── ...
├── static/                     # 纯静态资源 (直接拷贝到dist/static/里面) 注意：现在的开发习惯 基本不再使用这个目录
├── test/
│   └── unit/                   # 单元测试
│   │   ├── specs/              # 测试规范
│   │   ├── index.js            # 测试入口文件
│   │   └── karma.conf.js       # 测试运行配置文件
│   └── e2e/                    # 端到端测试
│   │   ├── specs/              # 测试规范
│   │   ├── custom-assertions/  # 端到端测试自定义断言
│   │   ├── runner.js           # 运行测试的脚本
│   │   └── nightwatch.conf.js  # 运行测试的配置文件
├── .babelrc                    # babel 配置文件
├── .editorconfig               # 编辑配置文件
├── .gitignore                  # 用来过滤一些版本控制的文件，比如node_modules文件夹
├── index.html                  # index.html 入口模板文件  （单页面应用）   全局的入口文件   无需任何修改
└── package.json                # 项目文件，记载着一些命令和依赖还有简要的项目描述信息  管理当前项目中使用到的前端依赖
└── README.md                   #介绍自己这个项目的，可参照github上star多的项目。
build/

Vue 全家桶之 vue cli (脚手架)相关推荐

Vue全家桶（Vue基础看这篇就够了）
目录第一章:vue核心 1.1.Vue 简介 1.1.1 官网 1.1.2 Vue是什么? 1.1.3 Vue的特点 1.1.4 Vue周边库 1.2 初识Vue 1.3 模板语法 1.4 数据绑定 ...
浅谈VUE全家桶（Vue、VueX、Vue-Router、axios、Vue-cli）的理解与认识
1.Vue veu是一个渐进式的 .专注于视图层的前端开发框架,通过数据驱动和组件化的方式实现了高效的前端开发 ,既可以通过文件引入的方式在普通页面中被引入使用,也可以基于webpack等构建系统结 ...
Vue全家桶之 Vue基础
目录 1. Vue 概述 2. Vue 基本使用 2.1 Vue安装 2.1.1 直接用 script 标签引入 2.1.2 NPM 2.1.3 其它安装方式(略...) 2.2 与传统开发模式对比 ...
【面试Vue全家桶】vue前端交互模式-es7的语法结构？async/await
作者 | Jeskson 掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb 2020.1.12 前端发请求,调用后端接口,来获取特定格式的数 ...
Vue开发入门(二) | 说说Vue全家桶有哪些~
全家桶,顾名思义,就是一个系列,可以组合开发成完整强大的Vue项目前言: *Vue两大核心思想:组件化和数据驱动. 组件化:把整体拆分为各个可以复用的个体数据驱动:通过数据变化直接影响bom展示, ...
vue取div当前宽度_【前端大神面考面试官系列】入门Vue全家桶
(给达达前端加星标,提升前端技能) 面试官问:Vue如何安装的呢? 达达回答:Vue的安装可以从两个方面进行安装,第一种是CDN引入,第二种是NPM安装. CDN引入 <script src=& ...
vue全家桶和react全家桶
感谢内容提供者:金牛区吴迪软件开发工作室今天笔者就简单的给大家介绍一下一般项目在开发的时候所提到的vue全家桶和react全家桶分别都包括哪些内容. vue全家桶: vue(整体架构) + vue ...
什么是vue全家桶？
vue全家桶: vue(整体架构) + vuex(状态管理) + vue-router(路由) + vue_resource || axios(ajax请求) + mint-UI(移动端UI框 ...
【前端大神面考面试官系列】入门Vue全家桶
(给达达前端加星标,提升前端技能) 面试官问:Vue如何安装的呢? 达达回答:Vue的安装可以从两个方面进行安装,第一种是CDN引入,第二种是NPM安装. CDN引入 <script src=& ...

Vue 全家桶之 vue cli (脚手架)

一、Vue cli 简介

Vue 全家桶之 vue cli (脚手架)相关推荐

最新文章

热门文章