VUE项目基础

1.项目环境搭建

1.1安装vue-cli脚手架构建工具

vue-cli提供了一个官方命令行工具，可用于快速搭建大型单页应用

npm install -g @vue/cli

1.2查看脚手架工具

vue -V

1.3创建项目

vue create 项目名称

npm init vite@latest 项目名称

选用npm init vite@latest 项目名称

1. vue
2. Customize with create-vue
3. Add TypeScript? › No / Yes
4. Add JSX Support? › No / Yes
5. Add Vue Router for Single Page Application development? › No / Yes
6. Add Pinia for state management? › No / Yes
7. Add Vitest for Unit Testing? › No / Yes
8. Add an End-to-End Testing Solution? › - Use arrow-keys. Return to submit. ❯ No Cypress Nightwatch Playwright
9. Add ESLint for code quality? › No / Yes

选用vue create 项目名称

1. Please pick a preset: (Use arrow keys)

   • Default ([Vue 3] babel, eslint)
   • Default ([Vue 2] babel, eslint)
   • Manually select features

2. Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)

   • ◉ Babel
   • ◯ TypeScript
   • ◯ Progressive Web App (PWA) Support
   • ◉ Router
   • ◉ Vuex
   • ◯ CSS Pre-processors
   • ◯ Linter / Formatter
   • ◯ Unit Testing
   • ◯ E2E Testing

3. Choose a version of Vue.js that you want to start the project with (Use arrow keys)

   • 3.x
   • 2.x

4. Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

5. Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

   • In dedicated config files
   • In package.json

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

2.配置默认端口

// vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    port:8082,
    host:'localhost',
    open:true
  }
})