第一步
安装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 来测试是否引入成功
运行程序就可以看到我们加入的按钮了