01 MacBook电脑配置环境
1 安装TypeScript
npm install -g typescript
- 使用权限安装
sudo npm install -g typescript
- 先安装淘宝镜像,再安装ts
sudo npm install -g cnpm --registry=https:
sudo cnpm install -g typescript
2 配置vue3开发环境
sudo npm install -g @vue/cli
vue --version
02 创建项目
- 在终端中用命令创建项目
vue create vue3demo
Vue CLI v4.5.13
? Please pick a preset: (Use arrow keys)
Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
> Manually select features
Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project:
◉ Choose Vue version
◉ Babel
❯◉ TypeScript
◯ Progressive Web App (PWA) Support
◯ Router
◯ Vuex
◯ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Linter
? Choose a version of Vue.js that you want to start the project with
2.x
❯ 3.x
Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use lass-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected poly fills, transpiling JSX)? No
? Pick a linter / formatter config: Basic
? 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, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
In package.json
? Save this as a preset for future projects? (y/N)
cd vue3demo
npm run serve
- 用图形化界面创建项目
vue ui
vue ui -H 127.0.0.1
03 项目初始结构
|-node_modules
|-public
|-src
|-.browserslistrc
|-.eslintrc.js
|-.gitignore
|-package.json
|-README.md
|-tsconfig.json
|-yarn.lock