1-1 初始化脚手架
1-1-1
-
脚手架最新版本: 4.x
-
Vue command line interface
-
脚手架文件结构**
├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json:包版本控制文件
1-1-1-1 具体步骤
-
全局安装@vue/cli:
npm install -g @vue/cli
-
切换到你要创建项目的目录,然后使用命令创建项目
vue create xxxx
-
启动项目:
npm run serve
-
备注:
- 下载缓慢就配置npm淘宝镜像:
npm config set registry https://registry.npm.taobao.org
- 想查看webpack配置,执行:
vue inspect > output.js
- 下载缓慢就配置npm淘宝镜像:
1-1-1-2 脚手架结构
-
babel.config.js
: ES6 ----> ES5 -
package.json
: -
main.js
: 默认配置 -
vue.js与vue.runtime.xxx.js的区别:
-
vue.js是完整版的Vue,包含:核心功能 + 模板解析器。
-
vue.runtime.xxx.js是运行版的Vue,只包含:核心功能;没有模板解析器。
-
-
因为vue.runtime.xxx.js没有模板解析器,所以不能使用template这个配置项,需要使用render函数接收到的createElement函数去指定具体内容。
new Vue({ el: '#app', // render: h => h(App) // render(createElement) { // // console.log(typeof a); // // return null // return createElement('h1', '你好啊') // } })
1-1-2 修改默认配置
-
vue.config.js
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, // pages: { // index: { // entry: 'src/peiqi.js' // } // }, pages: { index: { // page 的入口 entry: 'src/index/main.js', // 模板来源 template: 'public/index.html', // 在 dist/index.html 的输出 filename: 'index.html', // 当使用 title 选项时, // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title> title: 'Index Page', // 在这个页面中包含的块,默认情况下会包含 // 提取出来的通用 chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', 'index'] }, // 当使用只有入口的字符串格式时, // 模板会被推导为 `public/subpage.html` // 并且如果找不到的话,就回退到 `public/index.html`。 // 输出文件名会被推导为 `subpage.html`。 subpage: 'src/subpage/main.js' } }, lintOnSave: false //关闭语法检查 )
-
peiqi.js
-
使用
vue inspect > output.js
可以查看Vue脚手架的默认配置