Vue3.x 搭建Vue环境 / 创建运行Vue项目 / 分析Vue目录

1. 安装Vue-cli

$ npm i -g @vue/cli

然后在终端中输入 vue -V 看有没有输出 @vue/cli 的版本号，确定是否安装成功。

2. 通过Vue-cli创建项目

vue create projectName

选择vue3选项

3. 运行项目

 $ cd vue3-example
 $ npm run serve

运行成功后，根据提示打开本地地址，查看项目页面

4. 项目结构

• node_modules: npm 加载的项目依赖模块
• public: 公共资源目录
• src: 项目开发目录
  • assets: 静态资源目录，图片、css…
  • components: 组件文件
  • App.vue: 项目入口文件
  • main.js: 项目核心文件
  • index.css: 样式文件
• .xxxx: 一些配置文件，包括语法配置，git配置等等
• package.json: 项目版本、脚本、依赖包等配置信息文件
• README.md: 项目说明文档
• dist: 使用npm run build命令打包后会生成该目录

❓public 和 src/assets 目录的区别

• public下的文件不会被打包处理，会直接复制到打包目录 dist 下。必须使用绝对路径引用。
• assets 的文件会被打包工具处理解析为模块依赖，只支持相对路径形式。