使用vue搭建应用一入门
2023-09-14 09:00:01 时间
1.准备
安装nodejs,配置环境变量
安装了nodejs,也就安装了npm
安装webpack
npm install webpack -g
安装vue脚手架项目初始化工具 vue-cli
npm install vue-cli -g
使用淘宝镜像
npm config set registry https://registry.npm.taobao.org
安装yarn,facebook发布的nodejs包管理工具
npm i yarn -g -verbose
yarn改为淘宝镜像
yarn config set registry https://registry.npm.taobao.org
2.创建项目
(1)用vue-cli生成项目
vue init webpack robin-ui
(2)安装依赖包
cd robin-ui
yarn install
(3)启动
npm run dev
浏览器打开http://localhost:8080
3.导入到 VS Code
文件——》将文件夹添加到工作区
VS Code 安装扩展插件 vetur
打开 robin-ui
build——webpack构建
config——配置目录
node_modules——依赖
src——代码目录
main.js核心文件
App.vue项目入口
static——静态资源
index.html——入口
package.json——项目配置
4.打包命令
npm run build
生成到 dist 目录,部署时将dist直接复制到服务器上
相关文章
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- Vue+Electron开发跨平台桌面应用实践
- vue中v-for数组和对象的循环
- vue 项目里正确地引用 jquery
- vue.js3:axios图片上传(vue@3.2.37 / axios@1.1.0)
- vue.js3.x安装tinymce 5.8.2并应用(vue 3.0.5)
- 使用vue搭建应用五引入Mock.js
- 使用vue搭建应用四引入axios
- 从vue-cli2.x升级到@vue/cli 4.x(node v14.15.0 / vue.js 3.0)
- Vue入门教程:node安装vue命令行工具及启动项目
- Chrome开发者工具对Vue应用的支持
- 怎样使用vue cli脚手架工具快速搭建vuejs项目和配置文件的具体步骤
- vue 使用editor 编辑器以及打包线上不显示问题
- vue 日期时间过滤器
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- webpack打包Vue应用程序流程
- 173:vue+openlayers:解决国内openstreetmap地图加载不出来的问题(代码示例)
- 092:vue+openlayers 自定义组件(放大、缩小、长度测量、面积测量)
- 【vue】vue中如何实现SPA 单页面应用_09
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- 对vue的mixin的理解,有什么应用场景?
- 基于Java+SpringBoot+Vue前后端分离图书借阅系统设计与实现(有视频讲解)
- Vue 进阶组件实战应用 -- 父子组件传值的应用实例(子父组件传值的两种触发方式)