vue 学习笔记 - 创建第一个项目 idea

1、安装Vue CLI

  • 查看npm版本号 (可跳过)
bash 复制代码
% npm -v
11.0.0
  • 安装Vue CLI
bash 复制代码
% npm install -g @vue/cli

2、创建项目

  • 进入工程文件目录
bash 复制代码
% cd /Users/ruizhifeng/work/aina-client
  • 查看vue 版本号 (可跳过)
bash 复制代码
% vue --version
@vue/cli 5.0.8
  • 创建项目
bash 复制代码
% vue create vue-demo-project

如下图,使用上下键,选择你需要使用的vue版本,点击回车,稍等一会项目即可创建成功

3、打开项目

在IntelliJ IDEA中打开项目:选择 "File" -> "Open",然后选择刚刚创建的项目目录

  • node_modules: 依赖的安装目录,里面存放当前项目所依赖的包,可删除
  • public:存放静态资源,如index.html
  • src:存放源代码,包括组件、视图和样式等。
    • components:存放Vue组件。
    • views:存放视图页面。
    • App.vue:根组件。
    • main.js:入口文件。
  • vue.config.js:Vue CLI配置文件。

4、安装依赖

bash 复制代码
% npm install

安装成功后,根目录中出现node_modules 文件夹,当前文件夹可删除

5、编译和本地运行

bash 复制代码
% npm run serve

可以通过日志中输出的地址访问

6、编译&打包

bash 复制代码
% npm run build

打包成功后,在根目录下生成了 dist 目录

7、配置idea 环境 (不同版本的 IDEA 位置可能不同)

  • 安装vue.js 插件(IntelliJ IDEA -> Settings... -> Plugins)
  • 配置html 支持.vue 后缀的文件 (IntelliJ IDEA -> Settings... -> Editor -> File Types)
  • 配置ECMAScript6 (IntelliJ IDEA -> Settings... -> Languages & Frameworks)

!到此,演示项目搭建完成

node、vue、npm、nvm 需自行查阅资料学习

相关推荐
代码AC不AC18 分钟前
【数据结构】队列
c语言·数据结构·学习·队列·深度讲解
生信小鹏40 分钟前
Nature旗下 | npj Digital Medicine | 图像+转录组+临床变量三合一,多模态AI预测化疗反应,值得复现学习的完整框架
人工智能·学习·免疫治疗·scrna-seq·scrna
云上艺旅1 小时前
K8S学习之基础六十九:Rancher创建svc资源
学习·云原生·容器·kubernetes·rancher
陌言不会python2 小时前
谷粒微服务高级篇学习笔记整理---thymeleaf
笔记·学习·微服务
Y1nhl4 小时前
Pyspark学习一:概述
数据库·人工智能·深度学习·学习·spark·pyspark·大数据技术
能来帮帮蒟蒻吗4 小时前
Go语言学习(15)结构体标签与反射机制
开发语言·笔记·学习·golang
Aphelios3807 小时前
Java全栈面试宝典:线程机制与Spring IOC容器深度解析
java·开发语言·jvm·学习·rbac
日暮南城故里8 小时前
Java学习------源码解析之StringBuilder
java·开发语言·学习·源码
安全方案10 小时前
精心整理-2024最新网络安全-信息安全全套资料(学习路线、教程笔记、工具软件、面试文档).zip
笔记·学习·web安全
士别三日&&当刮目相看10 小时前
JAVA学习*Object类
java·开发语言·学习