初识Vue,文档部分

wuchangjian2021-11-03 16:15:42编程学习

通过脚手架安装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',},

就是一组单页面绑定,

相关文章

14.1单行函数

-- 单行函数包含: -- 1.字符串函数 select ename,le...

yolo v5 NVIDIA Jetson Xavier NX 部署刷机+安环境(2)

安环境 到10.28号,已经快差不多1个月,在我的磨叽之下...

Enterprise:Web Crawler 基础 (一)

在 Elastic Enterprise Search 7.11 中,El...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。