Vue脚手架

最新推荐文章于 2024-10-13 09:05:12 发布
最新推荐文章于 2024-10-13 09:05:12 发布
阅读量755 收藏
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lx00000025/article/details/131233956
版权

目录

一、脚手架文件结构

my-app/
  |- node_modules/  # 依赖库
  |- public/        # 公共资源
  |   |- index.html # 应用程序的主 HTML 文件
  |   |- favicon.ico # 网站图标
  |- src/           # 源代码
  |   |- assets/    # 静态资源（图片、样式表等）
  |   |- components/  # 组件
  |   |- views/      # 页面级别组件
  |   |- App.vue     # 根 Vue 组件
  |   |- main.js     # 主 JavaScript 文件
  |- tests/         # 测试文件
  |- .gitignore     # Git 忽略配置文件
  |- babel.config.js  # Babel 编译器配置文件
  |- package.json   # 项目元数据和依赖信息
  |- README.md      # 项目文档

上述文件结构是一个典型的 Vue.js 项目的文件结构示例，其中包含了以下重要目录和文件：

  • node_modules/：存放所有的依赖库，可以通过包管理工具（如 npm 或 yarn）进行安装。
  • public/：存放应用程序的公共资源，如 HTML 文件和一些静态资源（如图标、全局 CSS 文件等）。
  • src/：存放应用程序的源代码，是开发者主要工作的目录。
    • assets/：存放静态资源文件，如图像、样式表等。
    • components/：存放 Vue 组件，用于构建应用程序的用户界面。
    • views/：存放页面级别的 Vue 组件，用于组织和布局多个相关组件。
    • App.vue：根 Vue 组件，定义了整个应用程序的外观和行为。
    • main.js：应用程序的入口文件，引入 Vue 库并创建 Vue 实例。
  • tests/：存放测试文件，用于对应用程序进行单元或集成测试。
  • .gitignore：Git 版本控制系统的忽略配置文件，指定哪些文件或目录不需要纳入版本管理。
  • babel.config.js：Babel 编译器的配置文件，用于将 ES6+ 代码转换为向后兼容的 JavaScript 代码。
  • package.json：项目的元数据和依赖信息，记录了项目名称、版本号、作者、脚本命令等信息，以及所依赖的其他包和版本。
  • README.md：项目的文档文件，通常用于描述项目的特点、使用说明和贡献指南等。

这是一个常见的示例，实际的脚手架文件结构可能因具体的脚手架工具和项目需求而有所差异。

1.1 创建脚手架

  1. 第一步（仅第一次执行）：全局安装@vue/cli

    npm install -g @vue/cli

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

    vue create xxx

  3. 第三步：启动项目

    npm run serv

备注：
如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry https://registry.npm.taobao.org

二、关于不同版本的Vue

  1. vue.js与vue.runtime.xxx.js的区别：
    1. vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
    2. vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
  2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。

三、vue.config.js配置文件

  1. 使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
  2. 使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

四、ref属性

  1. 被用来给元素或子组件注册引用信息（id的替代者）
  2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
  3. 使用方式：
    1. 打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>
    2. 获取：this.$refs.xxx

School.vue组件

<template>
  <div class="demo">
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
  </div>
</template>

<script>
export default {
    name:"School",
    data() {
        return {
            name:"大学",
            address:"四川"
        }
    },
}
</script>
<style>
    .demo{
        background-color: gray;
    }
</style>

App.vue

<template>
  <div>
    <h1 ref="title">hello,{{name}}</h1>
    <button ref="btn" @click="showDom">点我输出上方的DOM元素</button>
    <School ref="sch"></School>
  </div>
</template>

<script>
import School from './components/School.vue'
export default {
    name:"App",
    components:{School},
    data() {
        return {
            name:"蓝朽",
        }
    },
    methods: {
        showDom(){
            console.log(this.$refs.title);//真实dom元素
            console.log(this.$refs.btn);//真实dom元素
            console.log(this.$refs.sch);//School的vc实例对象
        }
    },
}
</script>

main.js

import Vue from "vue"
import App from "./App.vue"
Vue.config.productionTip=false;
new Vue({
    el:"#app",
    render:h=>h(App)
})

npm run serve 运行

这里示范了一下简单使用，在脚手架中使用的都是单文件组件。

五、props配置项

  1. 功能：让组件接收外部传过来的数据
  2. 传递数据：
  3. 接收数据：
    1. 第一种方式（只接收）：props:[‘name’]
    2. 第二种方式（限制类型）：props:{name:String}
    3. 第三种方式（限制类型、限制必要性、指定默认值）：
    props:{
	name:{
	type:String, //类型
	required:true, //必要性
	default:'老王' //默认值
	}
}

    备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

<template>
  <div>
    <h1>hello，{{msg}}</h1>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <h2>学生年龄：{{MyAge}}</h2>
    <button @click="MyAge++">点我年龄自增</button>
  </div>
</template>

<script>
export default {
    name:"Student",
    data() {
      return{
        msg:"蓝朽",
        MyAge:this.age
      }
    },
    //简单声明接收
    // props:['name','sex','age']
    //接收的同时对类型进行限制，对不上控制台会报错
    // props:{
    //   name:String,
    //   age:Number,
    //   sex:String
    // }
    //接收的同时对类型进行限制+必要值的设置+默认值设置
    props:{
      name:{
        type:String, //name的类型
        required:true //name属性必须传
      },
      age:{
        type:Number,
        default:90//默认值90
      },
      sex:{
        type:String,
        required:true
      }
    }
}
</script>

通过<Student name="张三" sex="男" :age="18"/>传值

六、mixin(混入)

  1. 功能：可以把多个组件共用的配置提取成一个混入对象

  2. 使用方式：
    第一步定义混合：

    {
data(){....},
methods:{....}
....
}

    第二步使用混入：

     全局混入：Vue.mixin(xxx)

 局部混入：mixins:['xxx']

定义mixin.js混合

import Vue from 'vue'
export const hunhe1 = {
    methods: {
        showName(){
          alert(this.name);
        }
    }
}
export const hunhe2 = {
    data(){
        return {
            x:100,
            y:200
        }
    }
}

main.js全局混入

import Vue from "vue"
import App from "./App.vue"
import { hunhe1,hunhe2 } from "./mixin";
Vue.config.productionTip=false;
Vue.mixin(hunhe1,hunhe2)
new Vue({
    el:"#app",
    render:h=>h(App)
})

Student组件局部混入

<template>
  <div>
    <h2 @click="showName()">学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
  </div>
</template>
<script>
import { hunhe1, hunhe2 } from '@/mixin';
export default {
    name:"Student",
    data() {
      return{
        name:"蓝朽",
        sex:"男"
      }
    },
    mixins:[hunhe1,hunhe2]
}
</script>

七、插件

  1. 功能：用于增强Vue
  2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
  3. 定义插件：
    对象.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}
  4. 使用插件：Vue.use()

定义插件

export default{
    install(Vue,x,y,z){
        console.log(Vue,x,y,z)
        //全局过滤器
        Vue.filter('mySlice',function(value) {
            return value.slice(0,4);
        })
    }
}

使用插件

import Vue from "vue"
import App from "./App.vue"
//应用插件
import plugins from './plugins'
Vue.use(plugins,1,2,3)
Vue.config.productionTip=false;
new Vue({
    el:"#app",
    render:h=>h(App)
})

School组件

<template>
  <div>
    <h2>学校名称：{{name | mySlice}}</h2>
    <h2>学校地址：{{address}}</h2>
  </div>
</template>

<script>
export default {
    name:"Student",
    data() {
      return{
        name:"b站大学hello world",
        address:"四川"
      }
    }
}
</script>

八、scoped样式

  1. 作用：让样式在局部生效，防止冲突。
  2. 写法：<style scoped>
<template>
  <div class="demo">
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
  </div>
</template>

<script>
export default {
    name:"Student",
    data() {
      return{
        name:"b站大学",
        address:"四川"
      }
    }
}
</script>
<!-- 局部有效，其他组件中可能也有demo样式，所有要加上scoped-->
<style scoped>
  .demo{
    background-color: blue;
  }
</style>

九、小结

  1. 组件化编码流程：
    (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
    (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
    1).一个组件在用：放在组件自身即可。
    2). 一些组件在用：放在他们共同的父组件上（状态提升）。
    (3).实现交互：从绑定事件开始。
  2. props适用于：
    (1).父组件 ==> 子组件 通信
    (2).子组件 ==> 父组件 通信（要求父先给子一个函数）
  3. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
  4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

十、webStorage

  1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
  2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
  3. 相关API：
    1. xxxxxStorage.setItem(‘key’, ‘value’);
      该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
    2. xxxxxStorage.getItem(‘person’);
      该方法接受一个键名作为参数，返回键名对应的值。
    3. xxxxxStorage.removeItem(‘key’);
      该方法接受一个键名作为参数，并把该键名从存储中删除。
    4. xxxxxStorage.clear()
      该方法会清空存储中的所有数据。
  4. 备注：
    1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
    2. LocalStorage存储的内容，需要手动清除才会消失。
    3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
    4. JSON.parse(null)的结果依然是null。

LocalStorage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>LocalStorage</h1>
    <button onclick="saveData()">点我保存数据</button>
    <button onclick="readData()">点我读取数据</button>
    <button onclick="deleteData()">点我删除数据</button>
    <button onclick="deleteAllData()">点我清空数据</button>
    <script>
        let p = {name:"zhangsan",age:18}
        function saveData() {
            localStorage.setItem('msg','hello localstorage');
            localStorage.setItem('person',JSON.stringify(p))
        }
        function readData() {
            const res = localStorage.getItem('person')
            console.log(JSON.parse(res))
        }
        function deleteData() {
            localStorage.removeItem('msg')
        }
        function deleteAllData() {
            localStorage.clear()
        }
    </script>
</body>

sessionStorage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>sessionStorage</h1>
    <button onclick="saveData()">点我保存数据</button>
    <button onclick="readData()">点我读取数据</button>
    <button onclick="deleteData()">点我删除数据</button>
    <button onclick="deleteAllData()">点我清空数据</button>
    <script>
        let p = {name:"zhangsan",age:18}
        function saveData() {
            sessionStorage.setItem('msg','hello localstorage');
            sessionStorage.setItem('person',JSON.stringify(p))
        }
        function readData() {
            const res = sessionStorage.getItem('person')
            console.log(JSON.parse(res))
        }
        function deleteData() {
            sessionStorage.removeItem('msg')
        }
        function deleteAllData() {
            sessionStorage.clear()
        }
    </script>
</body>
</html>

十一、组件的自定义事件

  1. 一种组件间通信的方式，适用于：子组件 ===> 父组件
  2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
  3. 绑定自定义事件：
    1. 第一种方式，在父组件中：<Demo @lx=“test”/> 或
    2. 第二种方式，在父组件中：
       <Demo ref="demo"/>
 ......
 mounted(){
    this.$refs.xxx.$on('lx',this.test)
 }
    3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
      1. 触发自定义事件：this.$emit(‘lx’,数据)
  4. 解绑自定义事件this.$off(‘atguigu’)
  5. 组件上也可以绑定原生DOM事件，需要使用native修饰符。
  6. 注意：通过this.$ refs.xxx.$on(‘lx’,回调)绑定自定义事件时，回调要么配置在methods中要么用箭头函数，否则this指向会出问题！

App.vue

<template>
  <div class="app">
    <h1>{{msg}}，{{studentName}}</h1>
    <!-- 通过父组件给子组件传递函数类型的props实现:子给父传递数据 -->
    <School :getSchoolName="getSchoolName"/>
    <!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第一种方法，使用@或v-on) -->
    <Student v-on:lxwork="getStudentName" @demo="m1" @click.native="show"/>
    <!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第二种方法，使用ref)-->
    <!-- <Student ref="student"/> -->
  </div>
</template>

<script>
import School from './components/School.vue'
import Student from './components/Student.vue'
export default {
    name:"App",
    components:{Student,School},
    data() {
      return {
        msg:'你好啊！',
        studentName:''
      }
    },
    methods: {
      getSchoolName(name){
        console.log("组件App收到了学校名："+name)
      },
      getStudentName(name,...params){
        console.log("组件App收到了学生名："+name,params)
        this.studentName = name
      },
      m1(){
        console.log('demo事件被触发了')
      },
      show(){
        alert(1123)
      }
    },
    mounted() {
      //绑定自定义事件
      // this.$refs.student.$on('lxwork',this.getStudentName)
      //绑定自定义事件，只被触发一次
      // this.$refs.student.$once('lxwork',this.getStudentName)
    },
}
</script>
<style>
.app{
  background-color: gray;
  padding: 5px;
}
</style>

Student.vue

<template>
  <div class="demo">
    <h2>学生姓名：{{name}}</h2>
    <h2 class="text">学生性别：{{sex}}</h2>
    <button @click="sendStudentName">把学校名给App组件</button>
    <button v-on:click="unbind">点我解绑lxwork事件</button>
    <button @click="death">销毁当前Student组件的实例(vc)</button>

  </div>
</template>

<script>
export default {
    name:"Student",
    data() {
      return{
        name:"蓝朽",
        sex:"男"
      }
    },
    methods: {
      sendStudentName(){
        //触发Student组件实例身上的lxwork事件
        this.$emit('lxwork',this.name,1,2,3)
        this.$emit('demo')
      },
      unbind(){
        // this.$off('lxwork')//解绑一个自定义事件
        // this.$off(['lxwork','demo'])//解绑多个自定义事件
        this.$off()//解绑所有自定义事件
      },
      death(){
        this.$destroy()//销毁了当前Student组件的实例
        //销毁后所有Student实例的自定义事件全都不奏效。
      }
    },
}
</script>
<!-- less语法可与嵌套样式 -->
<style scoped lang="less">
.demo{
  background-color: orange;
  padding: 5px;
  margin-top: 30px;
  .text{
    font-family: 楷体;
  }
}
</style>

十二、全局事件总线（GlobalEventBus）

  1. 一种组件间通信的方式，适用于任意组件间通信
  2. 安装全局事件总线：
    new Vue({
	......
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
	},
    ......
})
  3. 使用事件总线：
    1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
      methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}
    2. 提供数据：this.$ bus.$emit(‘xxxx’,数据)
  4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

main.js:安装全局事件总线

import Vue from "vue"
import App from "./App.vue"
Vue.config.productionTip=false;
new Vue({
    el:"#app",
    render:h=>h(App),
    beforeCreate() {
        Vue.prototype.$bus=this//安装全局事件总线,在Vue的原型上面添加$bus属性
    },
})

Student组件给School组件发送消息
School组件

<template>
  <div class="demo">
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
  </div>
</template>

<script>
export default {
    name:"Student",
    data() {
      return{
        name:"b站大学",
        address:"四川"
      }
    },
    mounted() {
      //绑定事件
      this.$bus.$on('hello',(data)=>{
          console.log("我是school组件："+data)
      })
    },
    beforeDestroy(){
    //销毁事件
      this.$bus.$off('hello')
    }
}
</script>
<style scoped>
  .demo{
    background-color: blue;
    padding: 5px;
  }
</style>

Student组件

<template>
  <div class="demo">
    <h2>学生姓名：{{name}}</h2>
    <h2 class="text">学生性别：{{sex}}</h2>
    <button @click="sendStudentName">把学生名给School组件</button>
  </div>
</template>

<script>
export default {
    name:"Student",
    data() {
      return{
        name:"蓝朽",
        sex:"男"
      }
    },
    methods: {
      sendStudentName(){
      	//触发hello事件
        this.$bus.$emit('hello',this.name);
      }
    },
}
</script>
<!-- less语法可与嵌套样式 -->
<style scoped lang="less">
.demo{
  background-color: orange;
  padding: 5px;
  margin-top: 30px;
  .text{
    font-family: 楷体;
  }
}
</style>

十三、nextTick

  1. 语法：this.$nextTick(回调函数)
  2. 作用：在下一次 DOM 更新结束后执行其指定的回调。
  3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。
    例如：
            //编辑
        handleEdit(todo){
            if (todo.hasOwnProperty('isEdit')) {
                todo.isEdit = true
            } else {
                this.$set(todo,'isEdit',true)
            }
            // todo.isEdit=true;
            this.$nextTick(function() {
                //获取焦点,也可以用setTimeout实现
                this.$refs.inputTitle.focus()
            })
            
        },

十四、Vue封装的过度与动画

  1. 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

  2. 写法：

    1. 准备好样式：
      • 元素进入的样式：
        1. v-enter：进入的起点
        2. v-enter-active：进入过程中
        3. v-enter-to：进入的终点
      • 元素离开的样式：
        1. v-leave：离开的起点
        2. v-leave-active：离开过程中
        3. v-leave-to：离开的终点
    2. 使用<transition>包裹要过度的元素，并配置name属性：
              <transition name="hello">
          	<h1 v-show="isShow">你好啊！</h1>
          </transition>
    1. 备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。
      在这里插入图片描述
<template>
  <div>
    <button @click="isShow=!isShow">显示/隐藏</button>
    <transition name="hello" :appear="true">
        <h1 v-show="isShow" class="come">你好啊！</h1>
    </transition>
  </div>
</template>

<script>
export default {
    name:'Test',
    data() {
        return {
            isShow:true
        }
    },
}
</script>

<style scoped>
	h1{
	    background-color: orange;
	}
	.hello-enter-active{
	    animation: Mytest 1s linear;
	}
	.hello-leave-active{
	    animation:Mytest 1s linear reverse;
	}
	@keyframes Mytest {
	    from{
	        transform: translateX(-100%);
	    }
	    to{
	        transform: translateX(0px);
	    }
	}
</style>

多元素过渡

<template>
  <div>
    <button @click="isShow=!isShow">显示/隐藏</button>
    <transition-group name="hello" :appear="true">
        <h1 v-show="isShow" class="come" key="1">你好啊！</h1>
        <h1 v-show="isShow" class="come" key="2">蓝朽</h1>
    </transition-group>
  </div>
</template>

<script>
export default {
    name:'Test2',
    data() {
        return {
            isShow:true
        }
    },
}
</script>

<style scoped>
	h1{
	    background-color: orange;
	    
	}
	/* 利用过渡实现 */
	/*进入的起点,离开的终点*/
	.hello-enter,.hello-leave-to{
	    transform: translateX(-100%);
	}
	.hello-enter-active,.hello-leave-active{
	    transition: 1s linear;
	}
	/*进入的终点,离开的起点*/
	.hello-enter-to,.hello-leave{
	    transform: translateX(0);
	}

</style>

使用第三方动画

<template>
  <div>
    <button @click="isShow=!isShow">显示/隐藏</button>
    <transition-group 
    name="animate__animated animate__bounce" 
    enter-active-class="animate__swing"
    leave-active-class="animate__backOutUp"
    appear
    >
        <h1 v-show="isShow" class="come" key="1">你好啊！</h1>
        <h1 v-show="isShow" class="come" key="2">蓝朽</h1>
    </transition-group>
  </div>
</template>

<script>
import 'animate.css'
export default {
    name:'Test3',
    data() {
        return {
            isShow:true
        }
    },
}
</script>

<style scoped>
h1{
    background-color: orange;
    
}

</style>
vue中的脚手架结构
weixin_50443809的博客
05-06 386
vue中的脚手架称为CLI:command line interface，命令行接口工具 创建Vue脚手架，vue中脚手架依赖于node.js,所以在搭建脚手架之前要下载好node.js 安装过程： ①全局安装@vue/cil :npm install-g@vue/cil 全局安装时需要配置npm淘宝镜像：npm config set registry https://registry.npm.taobao.org 打开cmd,输入淘宝镜像地址，出现警告不要紧，卡住时按回车。此时安装完毕之后关闭c
Vue脚手架项目结构分析
喜欢猪猪
09-13 1151
① build 目录内文件介绍文件名描述build.js构建生产环境的代码检查 Node.js 环境 和 NPM 的版本utils.js构建辅助工具类，类中主要是通过运算，来动态生成 webpack 一些加载器的配置用来配置 sourceMap，项目打包后会对 JS 压缩，sourceMap 用来记录代码压缩前后的对应关系，方便调试webpack 配置文件 - 开发环境和生产环境的通用配置。将基础配置、开发环境和生产环境各对应一个文件比较易于维护。
vue脚手架
最新发布
2302_80406801的博客
10-13 775
可以通过。
VUE脚手架结构详细介绍
交小新的博客
04-10 1405
为了标识是一个前端的方式访问的前端路由，则会在地址中用一个/#表示，/#是程序自己加上去的。如：
Vue 项目脚手架结构介绍
Becomin' Charles
02-22 1085
本文介绍了上一篇文章中介绍的脚手架生成的 Vue 项目框架的结构和各部分的功能。
vue脚手架（纯净版）
07-10
Vue脚手架（Vue CLI）是官方提供的一个命令行工具，旨在简化Vue项目的搭建和配置过程，让开发者能够快速启动新项目。"vue脚手架（纯净版）"通常指的是剥离了某些非必要插件或预设，只保留基础功能的CLI版本，以满足...
vue脚手架vue脚手架vue脚手架vue脚手架vue脚手架
04-26
Vue脚手架（Vue CLI）是Vue.js官方提供的一个命令行工具，用于快速搭建 Vue 项目，它极大地简化了项目的初始化过程，帮助开发者设置和配置项目环境，提高开发效率。 Vue CLI 提供了丰富的预设选项，包括Webpack配置...
vue脚手架搭建项目的兼容性配置详解
12-12
使用vue-cli搭建项目，面临着解决ie兼容性问题(ie9+)，因为ie浏览器并不支持es6语法等。 首先安装babel-polyfill，解决ie不支持promise对象的问题 npm install --save-dev babel-polyfill 安装成功之后,在main.js...
Vue脚手架的简单使用实例
10-18
Vue脚手架是Vue.js开发过程中常用的工具，它基于Webpack，可以帮助开发者快速搭建项目结构，实现自动化构建、打包和热加载等功能。Vue脚手架简化了项目的初始化工作，使得开发者能够专注于编写核心业务逻辑。 首先...
Vue脚手架结构解析
Eternity.Arrebol的博客
06-11 685
Vue脚手架是一个基于Vue.js的快速搭建项目的开发工具，它可以帮助开发者快速创建一个符合规范的项目结构。本文将对Vue脚手架的结构进行解析。 首先，Vue脚手架主要由以下几个部分组成： 1. 配置文件(`vue.config.js`):用于自定义项目的配置选项，如代理服务器、输出目录等。 2. 入口文件(`src/main.js`):Vue实例的入口文件，用于引入其他模块和组件。 3. 组件库(`src/components`):存放项目中使用的第三方组件库。 ...
vue之组件在脚手架构造篇
bk20103016的博客
07-08 381
最近开始使用了vue构建一个新项目，对于vue的核心优势--组件的构造，很多人刚开始的时候，都是懵逼的，在网上以及官网，他们都是已经构造好的组件，并没有从头到尾的详细介绍一个组件是如何封装的，这给小白们造成很大的不方便的地方，本文就是将一个vue的组件从头到尾给构建出来的教程 vue组件的优势 vue组件的构建 vue组件的注意事项 一、vue组件的优势 1、我们在写一个页面的时候，时...
Vue-Cli - Vue 脚手架的创建 以及 目录结构说明
CYK_byte的博客
10-18 3033
f）这个问你是否进行单词校验，校验出错会有红色波浪线. 这里不需要，因为你可能会写很多特殊字符，因此输入 n 回车即可.之后他就会去构建项目了，如果此时出现了如下错误，说明你权限不够，要使用管理员的方式打开命令行，再执行上述步骤.b）接下来会问你项目描述是否叫（默认）："A Vue.js project". 如果不想改，直接回车即可.d）接下来会问你，是否采用运行 + 编译的方式，实际上就是是否要热部署的意思，直接回车即可.h）接下来问你是否要使用 npm 来管理项目，这个肯定是需要的，直接回车即可.
VUE 分析脚手架结构
weixin_47198950的博客
02-28 291
分析脚手架文件夹的结构 public/ 将来所有不需要编译，就可直接使用的js和css，以及图片都放在public下。放在public下的文件，都不会被再次编译。比如: imgs文件夹，唯一的完整的首页index.html，bootstrap.css，jquery-3.2.1.js, bootstrap.js 放在public下的不需要编译的css和js，都要在唯一完整的页面index.html中引入。 src/ 放的是所有自己写的代码 /assets 放自己编写的公共的css和js 例
vue脚手架文件
qq_41691865的博客
02-22 524
首先区要分脚手架版本：若安装了最新版本脚手架，想用老版本脚手架，创建vue2项目，需要拉取vue-cli2.x的模板才可以用！！ 1.拉取模板命令： npm install @vue/cli-init -g 2.vue init webpack vue-cli2test 1、项目名称：默认 ? Project name vue-cli2test 2、项目描述：默认 ? Project description A Vue.js project 3、作者信息：默认读取git信息 ? Author baijung
vue脚手架搭建过程图解
08-27
Vue CLI（命令行接口）或Vue脚手架是一个官方提供的工具，它能帮助开发者快速初始化一个新的Vue项目，包含了一整套自动化构建工具，如编译、热重载、代码分割、优化等。在开始搭建Vue脚手架之前，我们需要确保已经...
Vue脚手架环境搭建.pdf
11-03
本文将详细介绍如何通过Vue脚手架工具来构建Vue项目的开发环境。 首先，我们需要安装Node.js，这是Vue.js开发的基础。Node.js是一个开放源代码、跨平台的JavaScript运行环境，用于在服务器端执行JavaScript代码。你...
Vue 脚手架
qq_45770253的博客
06-15 1528
1. Vue 脚手架的基本用法        Vue 脚手架用于快速生成 Vue 项目基础架构，其官网地址为：https://cli.vuejs.org/zh/ 打开选择命令提示符，安装 3.x 版本的 Vue 脚手架： // 安装最新版本的脚手架 npm install -g @vue/cli // 最新的脚手架是4.x的，有很多之前的组件不适用，所以自定义安装脚手架版本 npm install -g @vue/cli@版本号 npm install -g
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蓝朽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值