VueCLI脚手架
1、安装
1.1----安装插件
vscode插件(vue代码提示)
vetur
1.2----安装脚手架
npm install -g @vue/cli
测试是否安装成功
vue -V
打印版本号即安装成功~
2、使用
2.1----创建项目
两种方式:
- 命令行:
vue create project
- 图形界面:
vue ui(推荐)
使用图形界面(推荐)
- 🚀选个目录
- 🚀
🚀选择预设(第一次手动)
🚀选择功能
🚀选择vue版本以及配置
🚀可选择是否保存为预设(既模板)
然后就创建完成~
使用命令行创建
创建命令
vue create project
配置是一样的,就不一一测试了
配置图…
2.2----运行项目
npm run serve
http://localhost:8080 就能看到 看到LOGO了
注意:
UI界面服务器 端口8000
项目服务器 端口8080
3、项目结构
3.1----项目大致图
3.2----目录说明
- /public/index.html -----网页(
<div id="app"></div>
)- /src/views/xxx.vue -----大视图
- /src/assets -----静态资源(例如:img)
- /src/components/xxx.vue ----小视图
- /src/main.js ----项目入口
- /src/router/index.js ----路由配置
- /src/App.vue 根组件单文件 三部分:template、script、css样式
练习
新建一个my.vue组件,里面含有H1,img
通过点击首页的标签显示my.vue组件
实现
在/src/views下创建,MyView.vue
<template>
<div>
<img title="hello vue" src="../assets/logo.png" />
<h1>Hello Vue!</h1>
</div>
</template>
router/index.js 配置路由
主要代码
{
path: '/my',
name: 'my',
component: () => import(/* webpackChunkName: "about" */ '../views/MyView.vue')
}
/src/app.vue 根组件内放入<router-link>
<router-link to="/my">My</router-link>
效果图
npm run serve
运行
成功~
脚手架的入门教程就完成了~