【Vue基础七】-- Vue CLI

1-1 初始化脚手架

1-1-1

1. 脚手架最新版本： 4.x

2. Vue command line interface

3. 脚手架文件结构**

   ├── 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 具体步骤

1. 全局安装@vue/cli: npm install -g @vue/cli

2. 切换到你要创建项目的目录，然后使用命令创建项目

   vue create xxxx

3. 启动项目： npm run serve

4. 备注：

   • 下载缓慢就配置npm淘宝镜像： npm config set registry https://registry.npm.taobao.org
   • 想查看webpack配置，执行： vue inspect > output.js

1-1-1-2 脚手架结构

1. babel.config.js : ES6 ----> ES5

2. package.json:

3. main.js: 默认配置

4. vue.js与vue.runtime.xxx.js的区别：

   • vue.js是完整版的Vue，包含：核心功能 + 模板解析器。

   • vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

5. 因为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 修改默认配置

1. 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  //关闭语法检查
                                
              )
   

2. peiqi.js

3. 使用vue inspect > output.js可以查看Vue脚手架的默认配置