Vue.js + TypeScript App教程

01 MacBook电脑配置环境

1 安装TypeScript

npm install -g typescript // 安装失败：报权限不够 需输入sudo权限密码

使用权限安装

sudo npm install -g typescript // 如果还是失败 需输入sudo权限密码

先安装淘宝镜像，再安装ts

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
sudo cnpm install -g typescript

2 配置vue3开发环境

sudo npm install -g @vue/cli // 安装或升级版本 需输入sudo权限密码
vue --version // 查看版本

02 创建项目

在终端中用命令创建项目

vue create vue3demo // 创建项目 出现对话式询问

Vue CLI v4.5.13
? Please pick a preset: (Use arrow keys)     // 请选择预选项
  Default ([Vue 2] babel, eslint)           // 使用Vue2默认模板进行创建
  Default (Vue 3) ([Vue 3] babel, eslint)  // 使用Vue3默认模板进行创建
> Manually select features                // 手动选择(自定义)的意思
// 使用ts开发Vue3的代码需要选择第三项,如果没有第三项则说明vue-cli是旧版本需要更新
// Please pick a preset - 选择 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    // css预处理器
 ◉ Linter / Formatter    // 格式化工具
 ◯ Unit Testing          // 单元测试
 ◯ E2E Testing
// Check the features needed for your project - 多选择上 TypeScript，特别注意点空格是选择，点回车是下一步。

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 
// Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)

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 class-style component syntax - 输入 n，回车 // 是否需要使用class-style

? Use Babel alongside TypeScript (required for modern mode, auto-detected poly fills, transpiling JSX)? No 
// Use Babel alongside TypeScript - 输入n，回车 // 是否使用TypeScript和Babel的形式编译 JSX

? Pick a linter / formatter config: Basic
// Pick a linter / formatter config - 直接回车 // ESLint的一些配置

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save           // 保存的时候进行Lint
 ◯ Lint and fix on commit // 需要帮你进行fix（修理），这项我们不进行选择
// Pick additional lint features - 直接回车

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) //选择这些配置文件存放位置？
❯ In dedicated config files  // 单独存放
  In package.json            // 存放在package.json文件里
// Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车

? Save this as a preset for future projects? (y/N) // 问你需不需要把这些配置保存下来，下次好直接进行使用。
// Save this as a preset for future projects? - 输入n，回车
// 对话式询问结束，开始创建项目
cd vue3demo // 打开项目文件
npm run serve // 运行项目

用图形化界面创建项目

vue ui // 如果报错可能是运行命令的所在文件夹把默认的localhost占用了
vue ui -H 127.0.0.1

03 项目初始结构

|-node_modules       -- 所有的项目依赖包都放在这个目录下
|-public             -- 公共文件夹
---|favicon.ico      -- 网站的显示图标
---|index.html       -- 入口的html文件
|-src                -- 源文件目录，编写的代码基本都在这个目录下
---|assets           -- 放置静态文件的目录，比如logo.pn就放在这里
---|components       -- Vue的组件文件，自定义的组件都会放到这
---|App.vue          -- 根组件，这个在Vue2中也有
---|main.ts          -- 入口文件，因为采用了TypeScript所以是ts结尾
---|shims-vue.d.ts   -- 类文件(也叫定义文件)，因为.vue结尾的文件在ts中不认可，所以要有定义文件
|-.browserslistrc    -- 在不同前端工具之间公用目标浏览器和node版本的配置文件，作用是设置兼容性
|-.eslintrc.js       -- Eslint的配置文件，不用作过多介绍
|-.gitignore         -- 用来配置那些文件不归git管理
|-package.json       -- 命令配置和包管理文件
|-README.md          -- 项目的说明文件，使用markdown语法进行编写
|-tsconfig.json      -- 关于TypoScript的配置文件
|-yarn.lock          -- 使用yarn后自动生成的文件，由Yarn管理，安装yarn包时的重要信息存储到yarn.lock文件中