Vue-CLI脚手架基本使用和Vue2项目结构及路由

2022-11-07 15:17:02 浏览数 (1)

Vue-CLI脚手架基本使用

Vue-CLI(俗称：vue脚手架)是vue官方提供的、快速生成vue工程化项目的工具。

特定：

  1. 开箱即用
  2. 基于webpack
  3. 功能丰富且易于扩展
  4. 支持创建vue2和vue3的项目

中文网首页：https://cli.vuejs.org/zh/

安装vue-cli

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

代码语言：javascript复制
# 全局安装vue-cli
npm install -g @vue/cli

# 查看vue-cli的版本，校验vue-cli是否安装成功
vue --vuesion

解决windows PowerShell不识别Vue命令的问题

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

解决方案如下：

  1. 以管理员身份允许PowerShell
  2. 执行 set-ExecutionPolicy RemoteSigned命令
  3. 输入字符Y，回车即可

创建项目

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

代码语言：javascript复制
# 基于 命令行 的方式创建vue项目
vue create 项目名称

# 基于 可视化面板 创建vue项目
vue ui

可视化面板创建方式不做描述，记录一下如何用命令行的方式创建vue项目：

步骤1

在终端下运行 vue create demo 命令，基于交互式的命令行创建vue的项目：

步骤2

手动选择要安装的功能

  • 切换选择状态：空格键
  • 全部选中：a键
  • 反选：i键

一般项目勾选：Babel、CSS Pre-processors

步骤3

使用上下箭头选中vue的版本，并使用回车键确认选择：

步骤4

使用上下箭头选择要使用的css预处理器，并使用回车键确认：

步骤5

使用上下箭头选择如何存储插件的配置信息，并使用回车键确认选择：

步骤6

是否将刚才的配置保存为预设：

步骤7

开始创建项目并自动安装依赖包：

步骤8

项目创建完成：

Vue2项目结构及路由

梳理vue2项目的基本结构

主要的文件：src -> App.vue src -> main.js

main中的主要代码

代码语言：javascript复制
//1.导入vue的构造函数
import Vue from 'vue'
//2.导入App根组件
import App from './App.vue'

//屏蔽浏览器console面板的提示消息
Vue.config.productionTip = false

//3.创建vue实例对象
new Vue({
    render:h => h(App), //3.1使用render函数渲染App根组件
}).$mount('#app')        //3.2把App根组件渲染到$mount函数指定的el区域中

vue2项目中使用路由

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

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

4.x版本创建路由

代码语言：javascript复制
import { createRouter,createWebHashHistory } from 'vue-router' //1.按需导入需要的方法

import MyHome from './Home.vue' //2.导入需要使用路由进行切换的组件

const router = createRouter({//3.创建路由对象
    history:createWebHashHistory(),//3.1指定通过hash管理路由的切换
    routes:[    //3.2创建路由规则
        { path:'/home',component:MyHome },
    ],
})

export default router //4.向外共享路由对象

3.x版本的路由创建路由模块

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

代码语言：javascript复制
npm i vue-router@3.4.0 -S

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

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

代码语言：javascript复制
import Vue from 'vue'    //1.导入vue2的构造函数
import VueRouter from 'vue-router'    //2.导入3.x路由的构造函数

import Home from '@/components/Home.vue'    //3.导入需要使用路由切换的组件，@表示根目录

Vue.use(VueRouter)    //4.调用Vue.use()函数，把路由配置为Vue的插件

const router = new VueRouter({    //5.创建路由对象
    routes:[    //5.1声明路由规则
        { path:'/',redirect:'/home'},
        { path:'/home',component:Home },
    ],
})

export default router //6.向外导出路由对象

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

代码语言：javascript复制
import Vue from 'vue'
import App from './App.vue'
//1.导入路由模块
import router from './router'

Vue.config.productionTip = false

new Vue({
    render:h => h(App),
    //2.挂载路由模块
    // router:router,
    router,
}).$mount('#app')

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

代码语言：javascript复制
<template>
<div>
    <h1>App根组件</h1>
    <!-- 声明路由的占位符 -->
    <router-view></router-view>
</div>  
</template>
javascript powershell vue.js

0 人点赞