vue-cli

前言

这篇文章介绍vue脚手架，vue-cli！
vue-cli（俗称：vue 脚手架）是 vue 官方提供的、快速生成 vue 工程化项目的工具。
看完不会你打我。哈哈哈，开玩笑的，不多说，上刺刀！！

1. 什么是 vue-cli

vue-cli（俗称：vue 脚手架）是 vue 官方提供的、快速生成 vue 工程化项目的工具。

特点：

① 开箱即用

② 基于 webpack

③ 功能丰富且易于扩展

④ 支持创建 vue2 和 vue3 的项目

vue-cli 的中文官网首页：https://cli.vuejs.org/zh/

2. 安装 vue-cli

vue-cli 是基于 Node.js 开发出来的工具，因此需要使用 npm 将它安装为全局可用的工具：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

// 安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

//你还可以用这个命令来检查其版本是否正确：
vue --version
1
2
3
4
5
6
7
8

2.1 解决 Windows PowerShell 不识别 vue 命令的问题

默认情况下，在PowerShell 中执行 vue --version 命令会提示如下的错误消息：

解决方案如下：

① 以管理员身份运行 PowerShell

② 执行 set-ExecutionPolicy RemoteSigned 命令

③ 输入字符 Y ，回车即可

3. 创建项目

vue-cli 提供了创建项目的两种方式：

// 基于命令的方式创建项目
vue create hello-world

# OR

//基于图形可视化的方式创建项目
vue ui
1
2
3
4
5
6
7

4. 基于 vue ui 创建 vue 项目

这里介绍一下基于图形可视化的方式创建项目，命令的方式之前发过文章了。

步骤1：在终端下运行 vue ui 命令，自动在浏览器中打开创建项目的可视化面板：

步骤2：在详情页面填写项目名称：

步骤3：在预设页面选择手动配置项目：

步骤4：在功能页面勾选需要安装的功能（Choose Babel、vue-router、 CSS 预处理器、使用配置文件）：

步骤5：在配置页面勾选 vue 的版本和需要的预处理器：

步骤6：将刚才所有的配置保存为预设（模板），方便下一次创建项目时直接复用之前的配置：

步骤7：创建项目并自动安装依赖包。项目创建完成后，自动进入项目仪表盘。

5.在 vue2 的项目中使用路由

在 vue2 的项目中，只能安装并使用 3.x 版本的 vue-router。

在 vue3 的项目中，只能安装并使用 4.x 版本的 vue-router。

版本 3 和版本 4 的路由最主要的区别：创建路由模块的方式不同！

5.1 学习：3.x 版本的路由如何创建路由模块

步骤1：在 vue2 的项目中安装 3.x 版本的路由：

npm i vue-router@3.4.9 -S
1

步骤2：在 src -> views 目录下，创建需要使用路由切换的组件：

步骤3：在 src 目录下创建 router -> index.js 路由模块：

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

步骤4：在 main.js 中导入路由模块，并通过 router 属性进行挂载：

import Vue from 'vue'
import App from './App.vue'
// 导入路由模块
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12

步骤5：在 App.vue 根组件中，使用 < router-view> 声明路由的占位符：

1
2
3
4
5
6
7
8
9
10

写在最后

✨个人笔记博客✨

星月前端博客
http://blog.yhxweb.top/

✨原创不易，还希望各位大佬支持一下

👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️评论，你的意见是我进步的财富！