Vue脚手架

news2025/1/18 17:04:40

脚手架

安装步骤

全局安装@vue/cli
- npm install -g @vue/cli
- 安装之后使用不了vue的命令，查看nodejs文件发现我把vue装在了node_globalnpm这个文件夹中。
  
  解决方法：新增一条path指向该文件夹
切换到你要创建的目录创建脚手架
- vue create 项目名称
根据提示cd vue_test， npm run serve
完成安装
- 本机访问Local: http://localhost:8080/
- 同局域网访问Network: http://192.168.1.101:8080/

脚手架结构

配置文件

在这里插入图片描述

.gitignore
- git的忽略文件
babel.config.js
- babel配置文件
- ES6==>ES5
package-lock.json package.json
- 包的说明书
README.md
- 项目描述

src

在这里插入图片描述

main.js
- 执行完npm run serve之后直接执行这个文件
- 该文件是整个项目的入口文件
App.vue

app.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

assets
- 存放静态资源（图片，视频…）
components
- 组件都放在这里

public

在这里插入图片描述

网站图标和index.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">
    <!-- 配置页面图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页标题 -->
    <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

import Vue from 'vue'	//引入Vue
import App from './App.vue'

//阻止默认行为
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')   //相当于el:'#App'

为什么要使用render函数

这里import引入的vue是残缺版的，没有模板解析器（template解析器）

解决办法：

引入完整版
使用render函数

render函数

render是个函数，Vue会调用render函数，这个函数可以创建具体的元素。

render(createElement){

return createElement(‘h1’,‘你好’)

}

//简写成箭头函数

render:createElement=>createElement(app)

为什么不直接引入完整版vue

vue由两个东西组成，一个是vue核心还有一个是模板解析器

vue完整版中模板解析器的代码占用了差不多三分之一

最终进行打包的时候模板解析器不用进行打包

为了打包的时候节省点空间所以使用残缺版的vue（缺少模板解析器）

使用render函数就相当于：

买瓷砖（Vue核心）+雇工人（模板解析器）===>铺好的瓷砖

使用完整版vue相当于：

买瓷砖（Vue核心）+买工人（模板解析器）===>铺好的瓷砖+工人

修改默认配置（vue.config.js）

Vue脚手架隐藏了所有webpack相关配置，如果想要查看webpack配置（该文件不可修改），就要执行

vue inspect > output.js

如果要修改配置文件那么在vue.config.js中进行修改直接将要修改的内容写入该文件之后该文件会将修改的内容与被隐藏起来的原内容进行比较，更改被隐藏的文件中的内容。（vue不允许直接触碰被隐藏的核心文件）

module.exports={
    //修改入口文件配置项
    pages:{
        index:{
            //入口文件
            entry:'src/main.js'
        }
    },
    //关闭语法检查配置项
    lintOnSave:false
}