Node+WebPack+Vue-Cli+Vite--项目初始化

1 **node.js 安装详细步骤教程**

不修改 修改了一直有问题

系统变量下 变量名【NODE_PATH】变量值 E:\nodejs\node_global\node_modules

用户变量下 path (3)点击编辑 --> (4)新增–> (5)D:\nodejs\node_giobal

2 将npm仓库地址切换成淘宝镜像地址

npm config set registry https://registry.npm.taobao.org npm仓库地址切换成淘宝镜像地址

npm config get registry 查看是否更改成功

3 WebPack 安装 --vue-cli 不需要webPack 的安装 这里单纯的安装 webPack

npm install webpack -g

webpack v4+ 版本，并且想要在命令行中调用 webpack，你还需要安装 CLI

npm install --save-dev webpack-cli

webpack -v 验证

4 Vue-Cli 安装

npm install -g @vue/cli

是否正确

vue -V

升级

npm update -g @vue/cli

5 创建Vue 项目

vue create hello-world

Manually select features (手动选择功能)

Babel–TS–Router–VueX–css Pre-processors— Linter–Formatter

3.X

TS-- class-style n – Use Babel alongside TS y --Babel ->polyfill ->可以对浏览器兼容打补丁

n 哈希 方式hash

less 或者 Sass

ESlint + Standard config

Lint on save（保存校验 选这个即可）-- Lint and fix on commit（提交校验）

In dedicated config files（配置文件分开放）

===========================================================================

vue3 -Vite- TS

1 使用 vite-cli 命令

# npm
npm init vite@latest

# pnpm
pnpm create vite

# yarn
yarn create vite

2 输入项目名：

? Project name:  vite-vue3-ts-pinia

3 选择一个框架（vue）

? Select a framework: » - Use arrow-keys. Return to submit.
     vanilla // 原生js
 >   vue     // 默认就是 vue3
     react   // react
     preact  // 轻量化react框架
     lit     // 轻量级web组件
     svelte  // svelte框架

4 使用 typescript

? Select a variant: › - Use arrow-keys. Return to submit.
     vue
 ❯   vue-ts

5 启动项目

cd vite-vue3-ts-pinia && npm install && npm run dev

快速初始化（建议使用）：

// 不使用TS
npm init vite@latest project-name --template vue

# npm 6.x
npm init vite@latest project-name --template vue-ts
 
# npm 7+, 需要额外的双横线：
npm init vite@latest project-name -- --template vue-ts
 
# pnpm
pnpm create vite project-name -- --template vue-ts

# yarn
yarn create vite project-name --template vue-ts

自定义初始化项目

1 
npm init vite@latest project-name --template vue-ts

2
? Select a framework: » - Use arrow-keys. Return to submit.
     vanilla // 原生js
 >   vue     // 默认就是 vue3
     react   // react
     preact  // 轻量化react框架
     lit     // 轻量级web组件
     svelte  // svelte框架
  
3
js
TS

Customize --定制  选这个

Add TS  yes
Add Jsx yes
Add Router yes
Add pinia  yes
Add Vitest for Unit Test no
Add End-to-End Testing   no
Add Eslint    yes
Add Prettier  yes     

4 启动
cd name-XXX && npm install && npm run dev

vite + vue3 + ts + pinia + vueuse 配置

掘金参考