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

秒速五厘米 2024-05-05 22:19 6阅读 0赞

## 一、创建项目：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.

![在这里插入图片描述][1321bfc2cefc4603b8c8feefaf6ca8fa.png]

## 三、vue2项目结构分析 ##

### 3.1、项目整体结构分析 ###

![在这里插入图片描述][c03e453c34604f2192fc86a56c8ad593.png]

### 3.2、public文件夹结构分析 ###

![在这里插入图片描述][0cdca92aeebf4648b339c6c01f177ee7.png]

### 3.3、src文件夹结构分析 ###

![在这里插入图片描述][cc6c749ac25d441cb5b14014320ad1ed.png]

### 3.4、main.js分析 ###

![在这里插入图片描述][89085ea8631f465482855d2c152d1352.png]

### 3.5、vue.config.js文件分析 ###

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

[vue.config.js官网参考][vue.config.js]  
![在这里插入图片描述][efce57d680314095b19f6730f744dd8d.png]

[1321bfc2cefc4603b8c8feefaf6ca8fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/23288d3e56d844beb1f0715396477411.png
[c03e453c34604f2192fc86a56c8ad593.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/c53bf089b06948bb8b4e7032c950c856.png
[0cdca92aeebf4648b339c6c01f177ee7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/e9071ee64f644d00bfa62c9f6fc9faf4.png
[cc6c749ac25d441cb5b14014320ad1ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/d821f697317d4eeb9ee02a106b5ed241.png
[89085ea8631f465482855d2c152d1352.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/eb41ee27496e4152914b45d689f62fcc.png
[module.exports]: https://blog.csdn.net/qq_59747594/article/details/127700908
[vue.config.js]: https://cli.vuejs.org/zh/config/#lintonsave
[efce57d680314095b19f6730f744dd8d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/f302c50ea7134bc489c1aa6cbda704a6.png