构建vue项目

Posted 2022-10-01

# 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​​​​参考​​