您现在的位置是:首页 >其他 >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//关闭语法检查

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