Vue（Vue脚手架）

DF-vegan

已于 2023-07-03 10:01:59 修改

阅读量2k

点赞数 3

文章标签： vue.js 前端 javascript

于 2023-04-30 17:03:37 首次发布

本文链接：https://blog.csdn.net/weixin_57920269/article/details/130448718

版权

一、使用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 create 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），模板解析器没有成功获取到

解决：

使用引入完整Vue

使用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的区别：

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

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的入口