Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
- 通过
@vue/cli 实现的交互式的项目脚手架。 - 通过
@vue/cli +@vue/cli-service-global 实现的零配置原型开发。 - 一个运行时依赖 (
@vue/cli-service)，该依赖：
- 可升级；
- 基于 webpack 构建，并带有合理的默认配置；
- 可以通过项目内的配置文件进行配置；
- 可以通过插件进行扩展。
- 一个丰富的官方插件集合，集成了前端生态中最好的工具。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
概述
- 单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
- 在vue的spa中，需要编写vue文件。
- Vue提供单文件组件（扩展名为 .vue的文件），每一个vue文件由3部分组成：
- 模板（html代码）：<template>
- 脚本（js代码）：<script>
- 样式（css代码）：<style>
- 就是只有一张HTML页面 所有的页面跳转都在这个HTML里面 局部刷新
使用vue cli构建项目
1.安装node.js 安装vue.cli 必须先安装node.js
2.安装vue cli
npm install -g @vue/cli
3.创建项目
vue create 项目名
4.根据需求进行选择
步骤1：在这里选择手动配置
步骤2：上下键控制 空格选择 这里选择Babel转码器 Router Vuex
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end） 测试
步骤3：选择版本 2.x
步骤4：是否开启history模式 选择否
步骤6：选择你想把你的配置文件放在一个独立的配置文件中？还是放到package.json中？
选择package.json即可 没多大区别
步骤7：询问你是否保存以上设置 方便下次选择 这里选择 否 如果选择是 下面还要给你的配 置 取个名字
步骤8：cd 进入项目 npm run serve 启动项目
步骤9：出现两个地址 按住Ctrl键 点击 出现下面页面 项目创建成功
目录结构
- 主要目录结构
- 入口页面：程序显示的第一个页面
- 页面目录：用于存放“功能页面”。
- 路由目录：用于给“功能页面”配置访问路径
- 其他目录结构
入门案例：Vue文件
需求：访问/test-------Test.vue页面
- 步骤1：编写Test.vue页面
<template>
<div>
这是一个测试页面
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
- 步骤2：在路由定义Test.vue路径
{
path: '/test',
name: 'testName',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/Test.vue')
}
步骤3：在App.vue编写Test.vue访问路径
<router-link to="/test">测试页面</router-link>
步骤4：访问Test.vue
常见问题
- 创建vue项目时，提示禁用的脚本
- 需要操作：
管理员身份打开PowerShell
1.运行命令set-ExecutionPolicy RemoteSigned
2.输入 Y 回车
看了vue cli的安装方式总结一下。如有不多请多多指教！希望给您带来帮助！
vue-cli参考文档：介绍 | Vue CLI🛠️ Vue.js 开发的标准工具
