构建vue项目

前言

• 记录1篇vue项目构建的配置，太久没用，居然连基础都不会了 Σ( ° △ °|||)︴

环境配置

# nodejs安装：https://www.runoob.com/nodejs/nodejs-install-setup.html
# 打开cmd命令行工具，验证node、npm是否安装成功
  node -v 
  npm -v 

# 使用npm安装yarn
  npm install -g yarn 
# 验证是否安装成功
  yarn -v 

# 安装cnpm
  npm install -g cnpm --registry.npm.taotao.org
# 查看版本
  cnpm -v

# 安装vue-cli
  cnpm install -g @vue/cli
# 查看版本
  vue --version    

# 安装打包工具
  cnpm install -g webpack
# 查看版本
  npx webpack -v

# 安装json-serve，用于模拟后端服务
  npm install -g json-server 
# 编写json文件
  json-server --watch db.json
# 启动项目必须在json所在文件夹启动

# 安装ts
  npm install typescript -g
# 查看版本
  tsc

• 局部安装依赖

  npm install xxx –-save
  cnpm uninstall xxx --save

• 卸载依赖

# 打开终端卸载
  npm uninstall --save xxx           
  npm remove xxx

• 开发依赖和运行依赖

# 安装到运行依赖
  npm install xxx –-save       
# 安装到开发依赖
  npm install xxx -–save-dev
# 打开项目的package.json文件，dependencies表示运行依赖，devDependencies表示开发依赖

构建项目

• vue-cli构建vue2
  

• vue-cli构建vue3

• vite1构建vue3
  参考

# 安装vite
  cnpm i create-vite-app 
# 使用vite1创建vue3项目
  npm init vite-app vue_test
# 进入项目根目录
  cd vue_test
# 下载依赖
  npm install
# 启动项目
  npm run dev

• vite2构建vue3