构建vue项目

# nodejs安装：https://www.runoob.com/nodejs/nodejs-install-setup.html
# 打开cmd命令行工具，验证node、npm是否安装成功
  node -v 
  npm -v 
 
# 查看npm全局的安装路径
npm config get prefix
 
# 使用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
 
# 安装vite
npm install vite -g
vite -v
 
# 安装create-vite
npm install create-vite -g

• 局部安装依赖

  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

点击查看详细步骤

• 

• 

• 

• 

• 

• 

• 

• 

• 构建完成

• 

• 用编辑器打开项目文件夹，对项目初始化
  

• 打开终端使用命令安装依赖
  npm install less
  npm install less-loader@5.0.0

• 因为当前项目是用cli脚手架构建的，所以每次可用cmd输入vue ui打开vue控制台

• 可在控制台搜索添加插件、安装依赖、运行编译项目等
  
  
  

• 启动项目后报错：

• 错误原因：ts和element ui冲突

• 解决方案：删除ts或element ui
  
  
  
  

• 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
  参考