- 加载使用到的资源： 最小化加载原则
- 编写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代码