vue3 + vite3 脚手架从0搭建

npm 使用

1. 查看npm当前设置的源

npm config get registry

或者 查看当前所有源列表  npm config list

2. 设置为淘宝镜像

npm config set registry https://registry.npm.taobao.org

3. 设置回原本的源，用来发布npm包

npm config set registry https://registry.npmjs.org

pnpm使用

//查看源
pnpm config get registry 
//切换淘宝源
pnpm config set registry https://registry.npmmirror.com/

pnpm config set registry 

1、首先安装node环境 16.16.0

报错信息

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead

百度得：是因为node切换版本 npm版本不对导致的报错

我是用的nvm 1.1.7 下载 16.16.0 后 install 就报错了 注意 这里跟网上大部分的 npm -v 报错不一样

得更新到最新的 nvm，现在是1.1.9

2、要以管理员方式运行 

        安装这个包

 PS C:\Windows\system32> npm install -g npm-windows-upgrade

        执行这个命令, 会出现很多npm 版本选择 选择最新的 两次回车 npm -v 查看是否还报错

 PS C:\Windows\system32> npm-windows-upgrade
npm-windows-upgrade v6.0.1
? Which version do you want to install? (Use arrow keys)
> 8.16.0
  8.15.1
  8.15.0
  8.14.0
  8.13.2
  8.13.1
  8.13.0
(Move up and down to reveal more choices)

3、安装vite cli

        vite cli 跟 vue cli 是两个不同的东西

        vue cli 默认是webpack打包，如果你想用webpack就用vue cli

        vite cli 可以生成一个没有任何依赖的纯vite vue的包，你可以用社区提供的模板，选一个模板去升级里面的依赖做二次集成，这样不需要配置很多乱七八糟的东西，本贴主要用于学习 所有我们创建一个vite纯净模板

       安装最新的vite

PS E:\projectList\vue3> npm install -g vite@latest

        初始化一个项目

PS E:\projectList\vue3> npm init vite@latest

        输入 y 继续 

Ok to proceed? (y) y

        输入一个项目文件夹名称 

? Project name: » vite-project

        选择vue 

? Select a framework: » - Use arrow-keys. Return to submit.
    vanilla
>   vue
    react
    preact
    lit
    svelte

        不用TS选择vue，用TS选择vue-ts 我这里选择TS

? Select a variant: » - Use arrow-keys. Return to submit.
    vue
>   vue-ts

        创建完成了，vite3.0 刚发布不久，还没有vue cli那样让你选择vueRouter vuex eslint less/scss 之类的选项 估计以后会有
 

安装项目需要的依赖

        先捋一下 我们需要安装的依赖

        axios、vueRouter4、vuex4/pinia、element-plus/vant、eslint、prettier、scss/less

        vue-i18n

pnpm install axios -s
http://www.axios-js.com/zh-cn/docs/vue-axios.html

pnpm install vue-router@4 -s
https://router.vuejs.org/installation.html

pnpm install pinia -s
https://pinia.web3doc.top/getting-started.html

pnpm install vuex@next -s
https://vuex.vuejs.org/

pnpm install element-plus -s
https://element-plus.gitee.io/zh-CN/guide/installation.html#%E4%BD%BF%E7%94%A8%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8

pnpm install vant -s
https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

pnpm init @eslint/config -g
https://github.com/eslint/eslint#installation-and-usage

添加eslint

pnpm i -D eslint

初始化 

npx eslint --init

插件支持

1、 unplugin-auto-import/vite 

自动导入插件 配置完成之后使用ref reactive watch 等无须import 导入 ，可以直接使用

2、