初识Vue,文档部分

本文介绍如何使用Vue CLI全局安装脚手架并创建Vue项目。解析了项目目录结构及.vue文件的功能,包括template、script和style部分。还介绍了.vue文件间的引用方式,并详细说明了如何通过vue.config.js配置文件启用多页面应用模式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

通过脚手架安装vue

        npm i -g @vue/cli@4                全局安装脚手架

        vue create vue-demo                创建vue项目=>嫌麻烦直接选择vue版本

初识vue

项目目录

        node-modules                npm插件存放位置

        public                              静态页面存放位置

        src                                  主要文件目录

                                                以.vue js为主

        package.json                npm的配置文件,用以配置

可以在目录下新增vue.config.js文件,配置MPA模式

**vue是单页面应用程序,如果要多页面,则需要配置

.vue文件的作用以及之间的关联

        .vue是vue中低层文件,其组成是,template script style

                template是vue比较出众的地方,能在其内直接书写html

                script部分是沿用了react的,template会被优先使用,且会覆盖script

                style书写当前页面的样式,添加scoped属性,会使该属性只在该.vue生效

        js是.vue的上层文件,组成是,import new Vue

                首先引入.vue文件

                实例化vue

                再在其中按照规范书写 render: h => h(被引入的.vue文件)

        .vue引用其他vue

                一、使用js全局变量(存在单页机制)

                        先在js中   Vue.component("命名", 被引入的.vue)

                        再在.vue中直接引入

                                引入方式<命名/>

                二、使用script局部变量

                        在要引入的.vue中引入.vue,再执行components:{命名:引入的.vue}

                        再在template中引入<命名/>

开启多页模式

        在vue.config.js文件中添加

module.exports = {
  //设置非严格模式
  lintOnSave: false,
  //多页设置
  pages: {
    //项目名
    index: {
      //js是例
      entry: './src/main.js',
      //html页面
      template: './public/index.html',
    },
    home: {
      entry: './src/home.js',
      template: './public/home.html',
    },
    views: {
      entry: './src/views.js',
      template: './public/views.html'
    }
  }
}

一组数据,列如index: {entry: './src/main.js',template: './public/index.html',},

就是一组单页面绑定,

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值