vite 初始化项目

 

vue3.0+vite
1.全局安装vite

// 可以在全局目录中看到create-vite-app目录
npm install -g create-vite-app
1
2
2.初始化vite项目

// 两种命令结果相同
// npm init vite-app <project-name>
npm init vite-app viteappdemo
// create-vite-app <project-name>
create-vite-app viteappdemo

 

注意：这里安装项目工具的构建版本为vue3.0和vite1.0
此版本的JS模板为了兼任vue2.0的写法，暂时不是setup语法糖，如果从旧版本过来的伙伴建议还是直接学习vue3的语法模板，尽快脱离2.x旧版。

在该安装方法中我们可以看到 npm WARN警告说明该指令已经或者正在被弃用
根据命令行推荐的命令进行安装的版本也是最新的
所以推荐使用最新命令npm init vite进行安装

 

$ npm init vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite

然后按照提示操作即可！

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue





1、这边安装完成后，运行后，打开网页报错。

  Uncaught SyntaxError: Unexpected token

 

2.版本更改为

 

"dependencies": {

    "vue": "^3.2.37"

  },

  "devDependencies": {

    "@vitejs/plugin-vue": "^3.0.0",

    "vite": "^3.0.0"

  }

**********************************************

更改后：

 

"dependencies": {

    "vue": "^3.2.25"

  },

  "devDependencies": {

    "@vitejs/plugin-vue": "^2.0.0",

    "vite": "^2.7.2"

  }

 

 

转：https://blog.csdn.net/weixin_46835329/article/details/122741097