VueCLI脚手架

1、安装

1.1----安装插件

vscode插件(vue代码提示)vetur

1.2----安装脚手架

npm install -g @vue/cli

测试是否安装成功

vue -V

打印版本号即安装成功~

2、使用

官网:cli.vuejs.org/zh/

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运行 成功~ 脚手架的入门教程就完成了~