一、初始化脚手架3.1.1.说明
1. Vue脚手架是Vue官方提供的标准化开发工具(开发平台)2.最新的版本是4.x
2.文档Vue CLl3.1.2.具体步骤
1.如果下载缓慢请配置npm淘宝镜像npm config set registry http: //registry.npm.taobao.org
2.全局安装@vue/clinpm install -g @vue/cli
3.切换到创建项目的目录,使用命令创建项目vue create xxx4.选择使用vue的版本
5.启动项目npm run serve6.打包项目npm run build7.暂停项目Ctr1+C
Vue脚手架隐藏了所有webpack 相关的配置,若想查看具体的webpack配置,请执行vue inspect > output.js
二、脚手架文件结构
1 -.文件目录
2—- node_modules3—- public
4l - favicon.ico:页签图标5lL- index.html:主页面6 —- src
7 ll-- assets:存放静态资源8
i i L-- logo.png9
ll-- component:存放组件
10
l lL-- Helloworld. vue
11
l l-- App.vue:汇总所有组件
12
i i-- main.js:入口文件13
- .gitignore: git版本管制忽略的配置14!-- babel.config.js: babel的配置文件15l-- package.json:应用包配置文件
16- README.md:应用描述文件
17L-- package-lock.json:包版本控制文件
三、
1.vue.js 与vue.runtime.xxx.js的区别
a. vue.js是完整版的Vue ,包含:核心功能+模板解析器
b. vue.runtime.xxx.js是运行版的Vue,只包含核心功能,没有模板解析器
esm就是 ES6 module
2.因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接收
到的createElement函数去指定具体内容
3.1.6. vue.config.js配置文件
vue inspect > output.js 可以查看到Vue脚手架的默认配置
使用vue.config.js可以对脚手架进行个性化定制,和 package.json同级目录,详见配置参考|Vue CLl