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