Vue-cli 脚手架介绍

2020-03-16 0 By admin

使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作,那无疑效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。

一、Vue脚手架安装和使用

CLI是 Command-Line Interface , 翻译为命令行界面, 但是俗称脚手架。
Vue CLI是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置。

1.1、cnpm安装

由于国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。
你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了:
cnpm install [name]

二、Vue CLI2 脚手架安装

npm install -g @vue/cli-init

2.1、初始化项目

vue init webpack my-project

  1. Project name vuelearn01 #工程的名称
  2. Project description A Vue.js project #工程的描述信息
  3. Author lyzhang #工程的开发者(描述信息)
  4. Vue build standalone #选择运行时编辑模式和运行模式
  5. Install vue-router? No #路由
  6. Use ESLint to lint your code? No #ESLint 代码检测规范
  7. Set up unit tests No #单元测试
  8. Setup e2e tests with Nightwatch? No #End to End 安装Nightwatch 是一个利用selenium或webdriver 等进行自动化测试的框架
  9. Should we run `npm install` for you after the project has been created? (recommended) npm #使用yarn 或者npm管理包。

2.2、目录结构简介

  1. build/ 和config/ webpack 相关的配置
  2. src/ 编写代码的位置
  3. node_modules 依赖的node相关的模块
  4. .babelrc ES代码相关转化配置
  5. .editorconfig 项目文本相关配置
  6. .gitignore 版本管理Git的忽略文件配置
  7. .postcssrc.js CSS相关转化配置
  8. package.js npm 的配置文件

三、Vue CLI3 脚手架安装

npm install -g @vue/cli

3.1、初始化项目

vue create my-project

3.2、目录结构简介

  1. public 相当于Cli2中的static目录
  2. src 代码写在这里
  3. .browserslistrc 浏览器相关配置

3.3、图像界面创建工程

也可以使用vue ui打开vuejs用于管理工程的图形界面,来创建工程。