vue2和vue3的环境搭建

1. node 安装

可以使用nvm 对node 的版本进行控制

# 查看版本
$ npm -v
2.3.0

#升级 npm
cnpm install npm -g

# 升级或安装 cnpm
npm install cnpm -g

# 安装最新vue稳定版
$ cnpm install vue

2.vue2环境安装

# 全局安装 vue-cli 
$ cnpm install --global vue-cli 

查看vue cli版本vue --version

二种方式创建vue2项目

• vue create vuepro1  //vue的方式创建项目 vue cli3版本才能使用
• vue init webpack my-project # 脚手架2.x的方式创建一个基于 webpack模板3版本的新项目

现在推荐使用 Vue CLI 3.x 或更高版本来创建和管理 Vue.js 项目 

ue CLI 4.x 和 5.x 提供了更现代化的项目创建和管理方式，并且默认支持 webpack 5

如果你没有安装 Vue CLI，或者需要升级到最新版本，可以使用以下命令：

npm install -g @vue/cli

vue create my-project // 创建项目

3.vue3环境安装

二种方式创建vue3项目

• npm init vite@latest
• npm init vue@latest（这个配置要全写）

4.typesript 环境安装

• 全局安装 ts

npm install -g typescript

• 查看版本

tsc -v

• tsc index.ts 编译文件
•  选择项目文件生成 package

tsc -init // 生成ts配置文件
npm init -y // 生成项目配置文件

•   修改配置文件

找到tsconfig.json ，打开圈出来这段注释，作用是编译之后的 js文件放置目录，

•  设置要编译的 ts 文件目录，这一段需要手动添加。 作用是编译该目录下的 ts。

•  找到 package.json。项目配置文件 把 npm run 命令设置成 tsc ,同时用 watch 监听 ,可以做到实时编译。

 我们应该首先先把ts文件转换为js文件

tsc test.ts

然后就会生成一个 test.js文件.然后运行如下命令就可以看到结果

node test.js