vue cli 入门——使用vue可视化界面搭建一个vue脚手架项目

如何使用vue脚手架创建一个vue前端项目

1、安装环境

首先安装环境vuecli3，百度即可

2、使用vue可视化管理界面创建项目

win + R打开控制台，输入

vue ui

此时控制台显示

此时，浏览器会打开vue项目管理器

点击创建即可创建一个新的vue前端项目
首先选择项目存储路径，点击创建新项目

进入创建页面

点击“功能”勾选
Babel、Router（配置路由）、Linter/Formatter、使用配置文件，四项
点击下一步

配置项如图所示
点击创建项目

此时vue项目就创建好了

点击开始就会运行了

到这里一个vue项目就创建好了。

3、使用vscode打开项目

这就是项目目录结构

3.1、简单理解项目结构和路由
点这里
3.2 将脚手架清理干净，将不需要的组件删除
这里App.vue为入口文件，首先清理App.vue

App.vue

<template>
  <div id="app">
      <div>
          <h1>这里是根文件</h1>
      </div>
      <!-- 路由占位符 -->
    <router-view/>
  </div>
</template>

<style>
</style>

此时随着一些组件从App.vue中被剔除，他们的单文件组件也就没有作用了统统删掉

此时目录结构变成了这样

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
]

const router = new VueRouter({
  routes
})

export default router

组件删除后将路由文件中注册的路由删除掉
这时候点击可视化操作台运行
或者使用命令行运行
查看是否报错。

成功运行。这时候一个vuecli3前端脚手架就清理好了