一、创建项目: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