Vue Cli

3月

本文最后更新于2020年03月23日，已经过了1703天没有更新，若内容或图片失效，请留言反馈

什么是Vue Cli

■如果你只是简单写几个Vue的Demo程序,那么你不需要Vue CLI.

■如果你在开发大型项目,那么你需要,并且必然需要使用Vue CUI

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

■CLI是什么意思?

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

Vue Cli使用前提

■安装Node.js

https://nodejs.org/zh-cn/download/

■检测安装版本

node -v

默认情况下自动安装Node和NPM
Node环境要求8.9或以上版本

■cnpm安装

由于国内直接使用npm的官方镜像是非常慢的，推荐使用淘宝NPM镜像

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

这样就可以使用cnpm命令安装模块

cnpm install [name]

Vue Cli使用前提安装webopack

文章链接

Vue Cli的使用

■安装脚手架-目前最新版为4.2.3

npm install @vue/cli -g

■创建项目
在终端中进入目标文件夹输入

vue create my-project(项目的名字)
回车

出现以下信息->选择默认或手动配置

text 代码:

? Please pick a preset: (Use arrow keys)
    > default (babel, eslint)
      Manually select features

default：选择默认配置
Manually：手动配置

为了了解配置过程，这里选择手动配置
回车

出现以下信息->选择配置

上下键移动，空格键选中或取消,A键全选。这里选择几个常用的配置

text 代码:

? Check the features needed for your project: (Press <space> to select, <a> to 
toggle all, <i> to invert selection)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

babel：是一个工具链，用于将ES6+语法转换为当前版本浏览器等环境兼容的javascript代码。
TypeScript：是 JavaScript 的一个超集，支持 ECMAScript6标准，扩展了 JavaScript 的语法。
Progressive Web App (PWA) Support：是一个结合了最好的web和app经验的渐进式网络应用程序。
Router：Vue.js 官方的路由管理器。
Vuex：一个专为 Vue.js 应用程序开发的状态管理模式。
CSS Pre-processors：css预处理器。
Unit Testing：单元测试。
E2E Testing：端到端测试。

出现以下信息->因为选择了router所以会问需不需要history模式

text 代码:

? Use history mode for router? (Requires proper server setup for index fallback in production)

输入y回车

回车

出现以下信息->选择css预处理

text 代码:

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)
  Less
  Stylus

回车

出现以下信息->将我们选择的配置放在单独的配置文件中还是放在package.json中

text 代码:

> In dedicated config files
  In package.json

为了方便以后修改，这里选择第一个
回车

出现以下信息->是否将这次的选择保存为preset

若保存，则下次在Please pick a preset可以选择本次的配置。

? Save this as a preset for future projects? (y/N)

输入y回车

? Save preset as:(输入要保存的名字)
回车

创建完成

目录结构

请输入图片描述

dist: 用于存放我们使用 npm run build 命令打包的项目文件
node_modules: 用于存放我们项目的各种依赖，比如axios等等，没有moudles文件，项目就没法运行，可以使用 npm install进行项目依赖的安装
public: 用于存放静态文件，在这个文件夹下的文件会原封不动的打包到dist文件夹中
public/index.html: 是一个模板文件，作用是生成项目的入口文件，webpack打包的js,css也会自动注入到该页面中。我们浏览器访问项目的时候就会默认打开生成好的index.html
src: 我们存放各种vue文件的地方
src/assets: 用于存放各种静态文件，如图片
src/compnents：用于存放我们的公共组件，如 header、footer等
src/App.vue: 主vue模块引入其他模块，app.vue是项目的主组件，所有页面都是在app.vue下切换的
src/main.js: 入口文件，主要作用是初始化vue实例，同时可以在此文件中引用某些组件库或者全局挂在一些变量
src/router/index.js: 路由文件，这个里边可以理解为各个页面的地址路径，用于我们访问，同时可以直接在里边编写路由守卫
src/store/index.js：主要用于项目里边的一些状态的保存
src/views：用于存放我们写好的各种页面，如login、main等
.browserslistrc：浏览器相关的配置
gitignore: git上传需要忽略的文件格式
babel.config.js: 是一个工具链，主要用于在当前和较旧的浏览器或环境中将ECMAScript 2015+代码转换为JavaScript的向后兼容版本
package.json: 模块基本信息项目开发所需要模块，版本，项目名称
package-lock.json: 是在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号