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

1、安装Vue CLI

• 查看npm版本号 （可跳过）

% npm -v
11.0.0

• 安装Vue CLI

% npm install -g @vue/cli

2、创建项目

• 进入工程文件目录

% cd /Users/ruizhifeng/work/aina-client

• 查看vue 版本号 （可跳过）

% vue --version
@vue/cli 5.0.8

• 创建项目

% 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、安装依赖

% npm install

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

5、编译和本地运行

% npm run serve

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

6、编译&打包

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