初始化一个vue项目

1、全局安装`@vue/cli`

npm install -g @vue/cli

2、构建Vue项目

vue create tsdemo

选择最后一个

截屏2022-04-25 21.13.02.png

利用空格选中以下几项

截屏2022-04-25 21.19.32.png

 ◉ Babel // ES6转ES5
 ◉ TypeScript // 使用TS
 ◯ Progressive Web App (PWA) Support // 渐进式Web应用
 ◉ Router // 路由
 ◉ Vuex // 状态管理
 ◉ CSS Pre-processors // CSS预处理
 ◉ Linter / Formatter // 规范类型
 ◯ Unit Testing // 单元测试
 ◯ E2E Testing // E2E测试

继续选
Y：是否使用class风格的组件语法
Use class-style component syntax
Y：是否使用Babel和TypeScript（现代模式、自动检测多边形填充、传输JSX所需）
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?
N：是否使用history路由模式
Use history mode for router? (Requires proper server setup for index fallback in production)
Sass/SCSS：选择预处理器模式
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)

语法检测规范，选择第一个

❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier

// 代码文件中有代码不符合 lint 规则时，会在 compile 阶段提示 warning。如果出现了语法错误，会直接在页面上显示 error
❯◉ Lint on save
// 代码除了语法错误导致的 error 外不会提示 warning。而是在当前项目进行 git 操作的时候，通过 githook，在 pre-commit 阶段执行 lint 和 fix 操作，自动帮我们把有语法错误的地方修改为符合规范。
 ◯ Lint and fix on commit

N：是否将此保存为未来项目的预设？
Save this as a preset for future projects?

3、启动项目

cd tsdome
npm run serve

4、Over

启动完效果.png

5、后续配置路由

5.1去掉路由中的#，找到文件`/src/router/index.ts`

添加mode: 'history'

const router = new VueRouter({
  mode: 'history',
  routes
})

5.2配置路由懒加载

相同页面更改

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // component: () => import('../views/AboutView.vue'),
    component: resolve => require(['../views/HomeView.vue'], resolve)
  }
]