《基础篇第4章》：使用vue脚手架创建项目

发布时间：2023-10-14 10:30

\"《基础篇第4章》：使用vue脚手架创建项目_第1张图片\"

文章目录

  • 4.1初始化脚手架
    • 4.1.1说明
    • 4.1.2具体步骤
    • 4.1.3模板项目的结构
    • 4.1.4 创建第一个vue项目分析index.html组成部分
    • 4.1.5render函数
    • 4.1.6修改默认配置
  • 本人其他相关文章链接

4.1初始化脚手架

4.1.1说明

  1. Vue脚手架是Vue官方提供的标准化开发工具（开发平台）
  2. 最新的版本是4.x
  3. 官网文档：https://cli.vuejs.org/zh/
  4. CLI：Command Line Interface

4.1.2具体步骤

第一步（仅第一次执行）：全局安装@vue/cli。
npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目
vue create xxxx

第三步：启动项目
npm run serve
备注：

  1. 如出现下载缓慢请配置 npm 淘宝镜像：
    npm config set registry https://registry.npm.taobao.org
  2. Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，
    请执行：vue inspect > output.js

4.1.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：包版本控制文件

\"《基础篇第4章》：使用vue脚手架创建项目_第2张图片\"

4.1.4 创建第一个vue项目分析index.html组成部分

注意点1： 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面

注意点2：开启移动端的理想视口

注意点3：favicon.ico”>配置页签图标，其中vue页面为了避免部署linux后路径混乱，不使用./ …/之类的路径，而使用<%= BASE_URL %>，它代表public下面的路径

注意点4：

注意点5：<%= htmlWebpackPlugin.options.title %>使用第三方组件，会去绑定获取package.json的name属性值

<head>
    <meta charset=\"utf-8\">
    <!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
      <!-- 开启移动端的理想视口 -->
    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">
      <!-- 配置页签图标 -->
    <link rel=\"icon\" href=\"<%= BASE_URL %>favicon.ico\">
<!-- 使用第三方组件，会去绑定获取package.json的name属性值 -->    
<title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
   <!-- 当浏览器不支持js时noscript中的元素就会被渲染 -->
    <noscript>
      <strong>We\'re sorry but <%= htmlWebpackPlugin.options.title %> doesn\'t work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
   <!-- 容器 -->
    <div id=\"app\"></div>
    <!-- built files will be auto injected -->
  </body>

4.1.5render函数

\"《基础篇第4章》：使用vue脚手架创建项目_第3张图片\"
注意点1：

问题： 图1默认引入vue文件究竟引入了哪个？

答案：如图2中第6行指定了默认引入的vue是哪个版本的，默认引入的是运行版vue.js(也就是残缺版vue.js，它没有模板解析器)
\"《基础篇第4章》：使用vue脚手架创建项目_第4张图片\"

图1

\"《基础篇第4章》：使用vue脚手架创建项目_第5张图片\"

图2

注意点2：为啥vue提供了那么多版本？直接只提供一个最完整版的vue.js不好吗？
答案：vue.js最全版包括“核心功能+模板解析器”，而运行版不包括“模板解析器”，区别点在项目开发好用webpack打包成浏览器认识的东西后“模板解析器”就没用了，但是它还占内存大小，为了简洁提供了不同精简版的vue.js文件

注意点3：import导入默认vue.js，如图3实例化vue时如果使用template属性会报错，报错如图4。
解决方案有2种，方案1：引入完整版vue.js，方案2：在继续使用运行版vue.js的基础上，使用render函数也可以解决问题。
\"《基础篇第4章》：使用vue脚手架创建项目_第6张图片\"

图3

\"在这里插入图片描述\"

图4

注意点4：既然vue实例化无法直接使用template属性，但vue模板中却可以直接使用