Vue-CLI(俗称:vue脚手架)是vue官方提供的、快速生成vue工程化项目的工具。
特定:
中文网首页:https://cli.vuejs.org/zh/
vue-cli是基于Node.js开发出来的工具,因此需要使用npm将它安装为全局可用的工具:
# 全局安装vue-cli
npm install -g @vue/cli
# 查看vue-cli的版本,校验vue-cli是否安装成功
vue --vuesion
默认情况下,在PowerShell中执行vue --version命令会提示如下错误信息:
解决方案如下:
vue-cli 提供了创建项目的两种方式:
# 基于 命令行 的方式创建vue项目
vue create 项目名称
# 基于 可视化面板 创建vue项目
vue ui
可视化面板创建方式不做描述,记录一下如何用命令行的方式创建vue项目:
在终端下运行 vue create demo 命令,基于交互式的命令行创建vue的项目:
手动选择要安装的功能
一般项目勾选:Babel
、CSS Pre-processors
使用上下箭头选中vue的版本,并使用回车键确认选择:
使用上下箭头选择要使用的css预处理器,并使用回车键确认:
使用上下箭头选择如何存储插件的配置信息,并使用回车键确认选择:
是否将刚才的配置保存为预设:
开始创建项目并自动安装依赖包:
项目创建完成:
主要的文件:src -> App.vue src -> main.js
//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的项目中,只能安装并使用3.x版本的vue-router
版本3.x和4.x的路由最主要的区别:创建路由模块的方式不同!
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.向外共享路由对象
步骤1:在vue2的项目中安装3.x版本的路由:
npm i vue-router@3.4.0 -S
步骤2:在src -> components 目录下,创建需要使用路由切换的组件
步骤3:在src目录创建router -> index.js路由模块:
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属性进行挂载
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>
声明路由的占位符
<template>
<div>
<h1>App根组件</h1>
<!-- 声明路由的占位符 -->
<router-view></router-view>
</div>
</template>