您现在的位置是：首页 >其他 >Vue（Vue脚手架）网站首页其他

Vue（Vue脚手架）

DF-vegan 2023-07-11 16:00:03
简介Vue（Vue脚手架）

一、使用Vue脚手架（Vue Cli）

Vue官方提供脚手架平台选择最新版本：

  • 可以相加兼容的标准化开发工具（开发平台）

  • 禁止：最新的开发技术版本和比较旧版本的开发平台

 Vue CLI🛠️ Vue.js 开发的标准工具https://cli.vuejs.org/zh/

  • c：cmmand

  • l：line

  • i：interface

  • 命令行接口工具 

1. 下载安装

  •  在cmd中查看vue是否存在cli

  •  全局安装（仅第一次）：

    • 配置npm为淘宝镜像

      • npm config set registry https://registry.npm.taobao.org

    • 安装：(安装过程中卡顿敲回车继续)

      • npm install -g @vue/cli

 

 2. 切换到要创建的目录

创建一个项目：vue creat name

执行之后询问执行哪个技术版本

  • babel：ES6 ==> ES5
  • eslint:js语法检查

选择好之后执行就会配置Webpack配置文件（脚手架环境）

3. 运行脚手架环境的vue文件

npm run serve ：然后就可以看到项目：会开启内置小服务器

 

 

二、分析脚手架 ：文件

脚手架工程停止：直接在服务端ctrl+c

 babel.config.js: babel控制文件：直接使用官方书写

 package-lock.json:包版本控制文件 

package.json: 符合npm就会存在包的说明书（依赖，名字，还有常用命令）

README.md： 对整个工程的描述，说明

Src：（打开调试工具并根据执行npm run serve执行过程进行分析）

  • main,js ：引入Vue和组件（创建Vue实例）=入口文件

/* 
该文件是整个项目的入口文件
*/
//自动引入vue(完整版vue)
import Vue from 'vue'
// 自动引入App组件：所有组件的父组件
import App from './App.vue'
// 关闭vue生产提示
Vue.config.productionTip = false
// 创建vue实例对象：vm
new Vue({
  // 也可以写成el方式：
  el: "#app",
  // 后面了解：完成：将App组件放入容器中功能
  render: h => h(App),
})
// .$mount('#app')这里将脚手架方式的模板连接转为el方式

  • APP组件：可以查看路径下的引入路径

    • assets：静态资源存放位置：png，视频

    • 大驼峰引入组件

public:

  • 图标

  • html：整个应用界面        

<!DOCTYPE html>
<html lang="">
  <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">
    <!-- 配置页签图标：路径引入使用%=BASE_URL % :指得是public路径-->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页标题：找到package.json文件查找到name作为当前页面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>
</html>

三、main.js中的render配置项 

如果直接使用自己的方式：（模板解析和引入组件）会报错

template:`<h1>你好</h1>`
components:{App}

表示正在使用一个运行版本的Vue（vue.runtime.esm.js），模板解析器没有成功获取到

解决：

  1. 使用引入完整Vue

  2. 使用render配置（解决不完Vue的方式）：将上面自己的方式交给render

//render函数  
render(creatElement) {
    //必须使用返回值
    return  creatElement('h1','你好啊')
  }
//由于render没有使用this，呢么就可以使用箭头函数
render:creatElement => return  creatElement('h1','你好啊')
//用一个简单的此替换creatElement
render:q=> return  q('h1','你好啊')
//最后形成

render: h => h('app')

总结: 

vue.js和vue.runtime.xxx.js的区别：

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

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

因为.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数收到的creatElement函数去指定具体内容       

 四：脚手架默认配置

 main入口文件改为其他名字：然后就无法工作

vue脚手架默认配置整理成js文件查看：vue indpect > output.js（里面默认配置不可以修改）

如果采用默认配置脚手架不可更改部分：

  • public：ico，index

  • src

  • main

配置参考 | Vue CLI🛠️ Vue.js 开发的标准工具https://cli.vuejs.org/zh/config/

网页中出现的配置参考都可以修改：例如vue.config.js文件可以更改vue的入口

语法检查关闭：lintOnSave

配置参考 | Vue CLI🛠️ Vue.js 开发的标准工具https://cli.vuejs.org/zh/config/#lintonsave

  • 停止项目 

  • 在main文件中添加lintOnSave配置：

  • lintOnSave：false//关闭语法检查

风语者！平时喜欢研究各种技术，目前在从事后端开发工作，热爱生活、热爱工作。

站长推荐