vue2-006——使用脚手架搭建vue2项目+项目结构分析

一、创建项目：vue create 项目名

D:\EnyiWang\Documents\myStudy\vue>vue create vue_test


Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 2] babel, eslint)


Vue CLI v5.0.8
✨  Creating project in D:\EnyiWang\Documents\myStudy\vue\vue_test.
  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 866 packages in 3m
npm notice
npm notice New major version of npm available! 8.19.3 -> 10.2.4
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.4
npm notice Run npm install -g npm@10.2.4 to update!
npm notice
  Invoking generators...
  Installing additional dependencies...


added 94 packages in 2m
⚓  Running completion hooks...

  Generating README.md...

  Successfully created project vue_test.
  Get started with the following commands:

 $ cd vue_test
 $ npm run serve

二、运行项目：cd 项目名 、 npm run serve

D:\EnyiWang\Documents\myStudy\vue>cd vue_test

D:\EnyiWang\Documents\myStudy\vue\vue_test>npm run serve

> vue_test@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...


 DONE  Compiled successfully in 7183ms                                                                                                                                               22:00:04


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.22.88:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

三、vue2项目结构分析

3.1、项目整体结构分析

3.2、public文件夹结构分析

3.3、src文件夹结构分析

3.4、main.js分析

3.5、vue.config.js文件分析

1、vue.config.js 是一个可选的配置文件
2、vue.config.js最终被webpack解析成Node语法，所以这里使用module.exports

vue.config.js官网参考