vue工程化管理

1. 加载使用到的资源： 最小化加载原则
2. 编写html+css
   如何从c盘到E盘
   直接在cmd 输入E：回车

ProjectA
bin
docs
plugins
logs
…

package.json => 记录了你当前环境安装的工具包有哪些

node.js => nvm => node的版本管理工具
npm

安装 vue-cli

卸载vue-cli2
npm uninstall vue-cli -g
卸载vue-cli3及更高版本
npm uninstall @vue/cli -g

安装最新版本vue-cli(以后会需要用于创建项目的，所以全局安装)

npm install @vue/cli -g
查看vue-cli是否安装好
vue --version
@vue/cli 4.4.6

兼容vue-cli2

npm install -g @vue/cli-init

创建项目

vue create vuecli4-proj

选择使用模板，选择default

Vue CLI v4.4.6
? Please pick a preset:
iview-proj (babel, eslint)

default (babel, eslint)
Manually select features

提示成功

🎉 Successfully created project vuecli4-proj.
👉 Get started with the following commands:

$ cd vuecli4-proj
$ npm run serve

目录结构

node_modules => 安装包
public => 发布的目录
dist => build结果存放的目录
src => 源代码
assets => 放资源图片/js/css…
components => 组件
App.vue => 根组件
main.js => 入口文件
.gitignore => git忽略上传的文件
babel.config.js => js编译器配置
package.json => 该项目的配置信息
README.md => 帮助文档

eslint => 语法检查工具

创建低版本项目

vue init webpack vuecli2-proj
默认回车

vue-cli4项目的运行
入口配置文件 => package.json
npm run serve => package.json =>
scripts => serve => vue-cli-service serve

vue-cli-service serve
node_modules -> @vue -> cli-service -> lib -> config -> base.js

webpackConfig
.mode(‘development’)
.context(api.service.context)
.entry(‘app’)
.add(’./src/main.js’)
.end()
.output
.path(api.resolve(options.outputDir))
.filename(isLegacyBundle ? ‘[name]-legacy.js’ : ‘[name].js’)
.publicPath(options.publicPath)

自定义配置：
vue.config.js文件cli配置

默认配置读取-> main.js -> 创建Vue加载App.vue
-> 加载图片
-> 加载HelloWorld.vue

*.vue => Vue组件
html代码