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 需自行查阅资料学习

相关推荐
Invinciblenuonuo7 分钟前
FreeRTOS学习笔记【10】-----任务上下文切换
笔记·学习
好奇龙猫8 分钟前
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(11): てあります。
学习
2501_915373881 小时前
Node.js 学习入门指南
学习·node.js
绵绵细雨中的乡音1 小时前
Linux进程学习【基本认知】
linux·运维·学习
jaywongX2 小时前
Base64编码原理:二进制数据与文本的转换技术
前端·javascript·vue
我的golang之路果然有问题3 小时前
快速了解redis,个人笔记
数据库·经验分享·redis·笔记·学习·缓存·内存
Angindem5 小时前
SpringClound 微服务分布式Nacos学习笔记
分布式·学习·微服务
虾球xz5 小时前
游戏引擎学习第244天: 完成异步纹理下载
c++·学习·游戏引擎
BOB-wangbaohai5 小时前
Flowable7.x学习笔记(十四)查看部署流程Bpmn2.0-xml
xml·笔记·学习
先生沉默先5 小时前
c#接口_抽象类_多态学习
开发语言·学习·c#