vue3+ts学游记-001准备工作

第一步

   安装Node.js

      命令行中运行node -v来检查版本    

   安装npm  通过运行npm -g install npm@6.14.13来安装

       命令行中运行npm -v来检查版本

   安装Vue CLI 通过运行npm install -g @vue/cli来安装

   安装vscode

第二步

    配置npm全局模块路径和cache默认安装位置，打开cmd，分开执行如下命令：

        npm config set cache "D:\nodeJS\node-v14.17.0-win-x64\node_cache"
        npm config set prefix "D:\nodeJS\node-v14.17.0-win-x64\node_global"
        npm config set registry https://registry.npm.taobao.org/
        npm config get registry

 第三步 

      配置环境变量   

      NODE_HOME
      D:\nodeJS\node-v14.17.0-win-x64

      修改PATH并在最后添  加：;%NODE_HOME%;%NODE_HOME%\node_global;%NODE_HOME%\node_modules
注1：环境变量查看
           echo %node_home%
           echo %path%

  第四步 创建项目

     首先在项目文件加打cmd 执行vue create vue3_ts_demo来创建一个名为 vue3_ts_demo 的项目，然后：   

1、选择Manually select freatures来手动选择 ，这样才能添加ts

2、按空格选中 Babel、Typescript、css预处理器、Linter/Formatter，然后按回车下一步

3、选中 vue 的版本为3 

4、是否使用 class 风格的组件语法，我们选择 N
5、是否使用 Babel 和 TypeScript（现代模式、自动检测多边形填充、trans所需（JSX） 输入Y回车
6、是否使用 history 路由模式，选中 Y
7、选择 CSS 预处理器，选中第一个即可（Sass/SCSS）
8、选择语法检测规范，选中第一个即可（Basic）
9、选择保存时检查 / 提交时检查， 一般开发时选择第一个保存时检查（Lint on save）
10、选择配置信息存放位置，单独存放或者并入package.json，我们选择 （package.json）
11、是否保存为预设，这样下次创建项目就不用重新选择，我们选择 N
完整截图如下：执行以下代码启动项目

cd vue3_ts_demo
npm run serve

第五步

引入element-plus

Element-plus国内站点-安装 执行npm install element-plus --save来安装 Element-plus

完整引入

然后按照快速开始章节，在 main.ts 中完整引入：

在指南中，我们可以复制按钮的代码，放入 App.vue 来测试是否引入成功

运行程序就可以看到我们加入的按钮了