【VUE3】保姆级创建干净项目

目录

1.创建项目

2.启动项目

方式1（终端启动，关闭窗口则停止运行）

方式2（用webstorm打开项目启动）

方式3（webstorm终端手动输入运行命令，与方式1一样）

3.删除多余文件，创建为干净项目

---

1.创建项目

（1）进入终端（win+r => cmd）

（2）cd到你要创建项目的位置（教程创建到F盘下的vuedemo，各位根据自己情况）

（3）创建项目使用以下代码创建VUE项目

vue create 你的项目名称

注：项目名称不能未中文及特殊字符

（4）进入配置项使用↑或者↓选择 Manuall select features （手动选择配置）然后回车进入配置选择

（5）配置介绍及手动配置

Babel 是否需要Babel
TypeScript 是否配置TypeScript
Progressive Web App (PWA) Support
Router 配置vue路由
Vuex   配置状态管理
CSS Pre-processors  配置css预处理器 比如（less、scss、sass）
Linter / Formatter     eslint对代码进行检查，让代码更加规范，可在项目中在次配置
Unit Testing 测试相关
E2E Testing 测试相关

同样使用↑或↓进行选择，使用空格进行确认（空格选择后会出现* 表示已选择），本教程请根据我勾选的配置进行选择（以后可根据项目需求进行选择，例如安装其他代码管理仓库等等）

全部选择完毕后回车

（6）其他配置及介绍

请先按以下完成配置后查看介绍进行了解

各项配置介绍

? Use history mode for router? (Requires proper server setup for index fallback in production) 

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow ke
ys)
> Sass/SCSS
  Less
  Stylus

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save  //语法检查配置文件保存时检查
 ( ) Lint and fix on commit  //文件提交时检查

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files  //放独立文件放置
  In package.json  //放package.json里

? Save this as a preset for future projects? (y/N)

全部配置完成后回车即可创建项目

2.启动项目

方式1（终端启动，关闭窗口则停止运行）

// 切换到项目
cd 项目目录 
// 启动项目
npm run serve

启动成功后进入连接查看

出现以下页面则创建成功

方式2（用webstorm打开项目启动）

（1）打开步骤2目录下创建的项目（我这里是vuedemo1）

如果弹出是否信任项目选择信任即可

（2）打开packge.json（配置文件，无经验请勿修改）

（3）点击serve左侧对应的这个绿色三角形运行项目

（4）运行成功后同样有链接，点击进入出现一些内容则项目创建成功

（5）运行一次后webstorm右上角可快捷运行

方式3（webstorm终端手动输入运行命令，与方式1一样）

npm run serve

3.删除多余文件，创建为干净项目

（1）删除以下文件

（2）在views目录下创建Home.vue文件

<template>
  <div>首页</div>
</template>

<script>
export default {
  name: "HomeComponent"
}
</script>

<style scoped>

</style>

（3）修改router/index.ts路由文件

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HomeComponent from '../views/HomeComponent.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'HomeComponent',
    component: HomeComponent
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

（4）修改App.vue文件

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style lang="scss">
#app{
  width: 100%;
  height: 100%;
}
</style>

（5）启动查看效果