精华内容
下载资源
问答
  • Vue脚手架页面跳转

    千次阅读 2019-12-04 14:55:31
    1.进入index.js(路由)页面 刚刚进入页面时 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ routes: ...

    1.进入index.js(路由)页面
    刚刚进入页面时

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
      ]
    })
    

    添加import arr from '@/components/arr'(arr代表你要用的页面名字)在import HelloWorld from '@/components/HelloWorld的下方。
    在routes中给arr注册

      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        {
          path: '/arr',
          name: 'arr',
          component: arr
        }
      ]
    

    2.回到你要实现跳转事件的页面(我这里是回到HelloWorld.vue中)
    在methods中添加一个事件

    methods:{
    tiaozhuan: function() {
          this.$router.push({ path: "/arr" });
           }
        }
    

    将事件绑定在你的按钮中

    <p @click="tiaozhuan">确认</p>
    

    在页面点击确认即可成功跳转(从HelloWorld.vue跳转到arr.vue)

    运行效果图
    在这里插入图片描述
    在这里插入图片描述

    对地址选择器感兴趣可以查看我的博客Vue脚手架中运用Vant-ui省市区选择器中查看
    或者去Vant中查看关于地址选择器的代码AddressEdit 地址编辑

    展开全文
  • 文章首发于个人博客,转载参考请注明来源用vue-cli快速搭建vue脚手架+实现vue页面跳转的小demo 微信小程序的页面跳转和生命周期函数[一个简单的 vue 页面跳转示例项目地址

    文章首发于个人博客,转载参考请注明来源用vue-cli快速搭建vue脚手架+实现vue页面跳转的小demo

    一个简单的 vue 页面跳转示例项目地址?

    vue简介

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

    Vue.js特点

    • 简洁: HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。
    • 数据驱动: 自动追踪依赖的模板表达式和计算属性。
    • 组件化: 用解耦、可复用的组件来构造界面。
    • 轻量: ~24kb min+gzip,无依赖。
    • 快速: 精确有效的异步批量 DOM 更新。
    • 模块友好: 通过 NPM 或 Bower 安装,无缝融入你的工作流。

    Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。

    搭建环境

    node和npm的环境是必须的,npm和node的安装不再赘述,自行解决即可。

    npm 全称:Node Package Manager,就是Node的包的一个管理工具,是Node.js下的主流套件管理程式。

    Node.js 用一句话来介绍就是:Node.js 是一个让 JavaScript 运行在服务端的开发平台。

    Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。


    从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。

    Vue.js 目录结构

    目录解析

    目录/文件说明
    build项目构建(webpack)相关代码
    config配置目录,包括端口号等。我们初学可以使用默认的。
    node_modulesnpm 加载的项目依赖模块
    src这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:assets: 放置一些图片,如logo等。components: 目录里面放了一个组件文件,可以不用。App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。main.js: 项目的核心文件。
    static静态资源目录,如图片、字体等。
    test初始测试目录,可删除
    .xxxx文件这些是一些配置文件,包括语法配置,git配置等。
    index.html首页入口文件,你可以添加一些 meta 信息或统计代码啥的。
    package.json项目配置文件。
    README.md项目的说明文档,markdown 格式

    1.全局安装 webpack

    请先确认自己已经安装npm和node.js,使用npm全局安装 webpack,打开命令行工具输入:npm install webpack -g,安装完成后输入webpack -v,如果出现相应版本号,则安装成功

    webpack 4.X 开始,需要安装 webpack-cli 依赖 ,所以使用这条命令 npm install webpack webpack-cli -g

    2.全局安装 vue-cli

    在命令行输入npm install -g vue-cli,安装完成后输入vue-V,如果出现相应版本号,则安装成功

    3.使用vue-cli来构建项目

    首先新建一个文件夹作为项目存放地,cd进入其目录,输入以下命令创建项目vue init webpack vue-demo,模版下载成功后会有一些交互的项需要填写

    ? Project name vue-demo # 项目名称,直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters),阮一峰老师博客为什么文件名要小写 ,可以参考一下。
    ? Project description A Vue.js project # 项目描述,随便写
    ? Author # 作者名称
    ? Vue build standalone # 我选择的运行加编译时
    	Runtime + Compiler: recommended for most users
    ? Install vue-router? Yes # 是否需要 vue-router,路由肯定要的
    ? Use ESLint to lint your code? Yes # 是否使用 ESLint 作为代码规范.
    ? Pick an ESLint preset Standard # 一样的ESlint 相关
    ? Set up unit tests Yes # 是否安装单元测试
    ? Pick a test runner 按需选择 # 测试模块
    ? Setup e2e tests with Nightwatch? 安装选择 # e2e 测试
    ? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器,我选的NPM
    

    安装成功后,cd进入项目目录,执行命令npm install进行初始化,安装我们的项目依赖包,也就是安装package.json里的包。

    4.运行项目

    命令行执行npm run dev

    打开浏览器访问 http://localhost:8080 就能看到欢迎页面,若页面加载不出来可能是本地8080端口被占用,需要修改一下配置文件config里的index.js的post即可

    5.vue-cliwebpack 配置

    package.json 可以看到 开发 和 生产 环境的入口。

    • dev 是开发环境的启动命令
    • build 是生产打包环境的命令
    • lint 是ESLint的检查命令 在 --ext 前加一个 --fix 可以自动修复不符合规范的代码

    打包上线:运行 npm run build 命令,就可以进行打包工作了,打包完成后,会生成 dist 目录,项目上线时,把dist 目录下的文件放到服务器就可以了

    在谷歌商店搜索调试工具 vue-tool 安装到浏览器,调试项目很好用


    vue项目实现页面跳转

    假设现在有两个页面 HelloWorldRegistered ,路由配置在 src/router/index.js

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import Registered from '@/components/Registered'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        {
          path: '/Registered',
          name: 'Registered',
          component: Registered
        }
      ]
    })
    

    页面 HelloWorld

    <template>
      <div class="hello">
        <h1>密码登录</h1>
        <input placeholder="请输入用户名" type="text" name="userName"/>
        <br><br>
        <input placeholder="请输入密码" type="text" name="passWord"/>
        <br><br>
        <input type="submit" value="登录" />
        <button @click="go">点我跳转</button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App',
          msg1: 'hello my app'
        }
      },
    
      methods:{
      	go(){
      		this.$router.push('/Registered')
      	}
      }
    }
    </script>
    

    页面 Registered

    <template>
      <div class="hello">
        <h1>我是Registered</h1>
        <button @click="back">点我返回</button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Registered',
      data () {
        return {
        }
      },
    
      methods:{
      	back(){
      		this.$router.push('/')
      	}
      }
    }
    </script>
    

    在HelloWorld中点击按钮跳转到Registered,在Registered中点击按钮也可以返回到HelloWorld,实现的效果如下图:

    HelloWorld 页面

    Registered 页面

    项目地址

    戳这里 ?

    展开全文
  • 关于vue脚手架安装 为什么vue ui没有跳转 关于vue脚手架安装 为什么vue ui没有跳转 关于vue脚手架安装 为什么vue ui没有跳转
  • vue脚手架弄成功后(用命令 vue init webpack my-project),是一个单页面应用,改成多应用入口,就可以用不同的url直接访问不同页面,这样方便页面跳转,而不是把所有的东西都放到一个页面中。 而webpack能够帮...

    1、用处

    vue的脚手架弄成功后(用命令 vue init webpack my-project),是一个单页面应用,改成多应用入口,就可以用不同的url直接访问不同页面,这样方便页面跳转,而不是把所有的东西都放到一个页面中。

    而webpack能够帮我们把每个部分的html、vue、js组装起来成各个新页面,放在dist文件夹下(文件夹的设置其实就是Webpack的output选项,可以自己在web.base.conf.js->config/index.js里面设置)。

    想更加深入了解html-webpack-plugin,请看帖子:插件 html-webpack-plugin 的详解

    2、配置步骤

    1)webpack.dev.conf.js

    作用:这个文件我的理解是全局配置,加上webpack.base.conf.js,就是完整全局总配置。里面有用到 Plugins 的 HtmlWebpackPlugin 插件,就是负责将html和vue和js文件组装起来的模块,所以第一步就是从这个模块入手,改成我们自己的模块。

    更改:将vue脚手架默认的配置注释掉,换成我们自己配置的HtmlWebpackPlugin插件:

    vue脚手架原来的插件:

    //原来的插件
      plugins: [
        //...
        new HtmlWebpackPlugin({
          filename: 'index.html',
          template: 'index.html',
          inject: true
        }),
        //...
      ]

    更改之后的效果:

     plugins: [
        //...
        // new HtmlWebpackPlugin({
        //   filename: 'index.html',
        //   template: 'index.html',
        //   inject: true
        // }),
      ].concat(utils.htmlPlugin())  //这里用到utils的htmlPlugin模块,而这个模块是我们待会自己写的。

    2)webpack.base.conf.js

    作用:全局配置之一,目前知道的两个作用是配置入口文件和配置各种文件解析的loader。

    更改:将entry改成多入口的文件。

    //原来的入口文件:
    module.exports = {
      //...
      entry: {
        app: './src/main.js'
      },
      //...
    }

    更改之后的效果:

    //原来的入口文件:
    module.exports = {
      //...
      entry: utils.entries(),    //这里的多入口文件我们放到utils待会自己实现。
      //...
    }

    3)utils.js

    在utils里面添加两个exports的模块:entries和htmlPlugin,这两个模块需要用到4个封装好的工具:glob(获取文件的模块),path(获取文件路径的模块,供glob服务),html-webpack-plugin(前面被我们注释了,这里要用),webpack-merge(可以合并配置)。由于path模块在utils.js文件早就引入,所以只需引入其他的模块+两个exports,如下:

    // glob是webpack安装时依赖的一个第三方模块,还模块允许你使用 *等符号, 例如lib/*.js就是获取lib文件夹下的所有js后缀名的文件
    var glob = require('glob')
    // 页面模板
    var HtmlWebpackPlugin = require('html-webpack-plugin')
    // 取得相应的页面路径,因为之前的配置,所以是src文件夹下的pages文件夹
    var PAGE_PATH = path.resolve(__dirname, '../src/pages')
    // 用于做相应的merge处理
    var merge = require('webpack-merge')
    
    
    
    //多入口配置
    // 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件,如果该文件存在
    // 那么就作为入口处理
    exports.entries = function() {
        var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
        var map = {}
        entryFiles.forEach((filePath) => {
            var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
            map[filename] = filePath
        })
        return map
    }
    
    //多页面输出配置
    // 与上面的多页面入口配置相同,读取pages文件夹下的对应的html后缀文件,然后放入数组中
    exports.htmlPlugin = function() {
        let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
        let arr = []
        entryHtml.forEach((filePath) => {
            let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
            let conf = {
                // 模板来源
                template: filePath,
                // 文件名称
                filename: filename + '.html',
                // 页面模板需要加对应的js脚本,如果不加这行则每个页面都会引入所有的js脚本
                chunks: ['manifest', 'vendor', filename],
                inject: true
            }
            if (process.env.NODE_ENV === 'production') {
                conf = merge(conf, {
                    minify: {    //对html文件压缩
                        removeComments: true,    //移除逗号
                        collapseWhitespace: true,    //折叠空白
                        removeAttributeQuotes: true    //移除属性的引号
                    },
                    chunksSortMode: 'dependency'    //文件排序方式
                })
            }
            arr.push(new HtmlWebpackPlugin(conf))
        })
        return arr
    }

    这些搞定了之后,运行项目,就能根据config/index.js配置的路径,在build/build.js文件里面将文件写入。

    至此配置完成。

    3、配置完运行的效果及跳转路径的使用及说明

    产生的东西差不多是这样:

    dist文件是我们的目标文件夹,里面的index.html, login.html, manageHomePage.html, mhpHome.html都是我们上述配置生成的。

    src下面的代码都是我们写的,框出来的三个框分别对应dist文件夹下的index.html, login.html, manageHomePage.html。可以注意到vue模块可能名称不同,比如第一个App.vue和index.html和index.js都不同,这是因为引入vue模块是写在index.js文件里,名称当然可以随意。不过一般写成相同的为好。但与vue模块名称可以随意不同,index.html和index.js两个模块名称一定要相同,因为我们上述配置的代码就是根据获取的名称将html和js组装在一起。

    可以看看第一个模块index的vue, html, js分别是怎么写的,并且看看生成后的dist/index.html是怎么样的:

    1、App.vue

    <!--1、App.vue-->
    <template>
      <div id="background">
        <div id="app">
          <img src="../assets/gray_logo.png">
        </div>
        <router-view/><!--这是router-view,将会被index.js设置的router(是一个js文件)替代,js文件就是index.router.js,里面设置了url对应的vue模块。相当于多加入一个vue模块。-->
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    html, body{
      margin:0;
      height:100%;
      width: 100%;
    }
    #background {
      position: relative;
      height: 100%;
      width: 100%;
      background-color: #CCCCCC;
    }
    #app {
      color: #2c3e50;
      position: absolute;
      left: 30px;
      bottom: 70px;
    }
    img{
      width:450px;
    }
    
    </style>
    

     2、src/../index.html

    <!-- 2、src/../index.html -->
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>miao_lm_frontend</title>
      </head>
      <body>
        <div id="app"></div>
        <!-- built files will be auto injected,这是由于我们在HtmlWebpackPlugin里面的inject设置了值true。
            inject有四个值: true body head false
            true 默认值,script标签位于html文件的 body 底部
            body script标签位于html文件的 body 底部
            head script标签位于html文件的 head中
            false 不插入生成的js文件,这个几乎不会用到的
            --> 
      </body>
    </html>

    3、index.js

    //3、index.js
    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router/index.router.js'    //router的配置
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    
    Vue.config.productionTip = false
    Vue.use(ElementUI)
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,    //router的设置
      components: { App },
      template: '<App/>'
    })

    3.1补充:router用到的./router/index.router.js文件

    //3.1补充:router用到的./router/index.router.js文件
    import Vue from 'vue'
    import Router from 'vue-router'
    import Home from './Home'
    
    Vue.use(Router)
    
    export default new Router({
      mode:'history',
      routes: [
        {
          path: '/',
          name: 'Home',
          component: Home
        }
      ]
    })

    3.2补充:对应的Home vue文件,强烈注意下面login的跳转路径的写法

    <!--3.2补充:对应的Home vue文件,强烈注意下面注释中login的跳转路径的写法-->
    <template>
    <el-main>
      <div>
        <el-row type="flex" justify="center" :gutter="10">
          <el-col :span="2">
            <i class="el-icon-menu"></i>
            <el-tooltip effect="dark" content="录入货物信息,订单信息等,管理货物暂存情况。" placement="bottom-start">
              <a> 物流备货</a>
            </el-tooltip>
          </el-col>
          <el-col :span="2">
            <i class="el-icon-time"></i>
            <el-tooltip effect="dark" content="根据货物的情况安排相应的货物上对应的车,能看到货物运输情况,到达目的地的时间等信息。" placement="bottom-start">
              <a> 货物配送</a>
            </el-tooltip>
          </el-col>
          <el-col :span="3">
            <i class="el-icon-location-outline"></i>
            <el-tooltip effect="dark" content="对运输车辆进行定位,实时跟踪货物运输情况。" placement="bottom">
              <a> 物流在途跟踪</a>
            </el-tooltip>
          </el-col>
          <el-col :span="3">
            <i class="el-icon-date"></i>
            <el-tooltip effect="dark" content="能对车辆的路线进行规划,以及遇到紧急情况安排相应车辆相关操作。" placement="bottom">
              <a> 物流运输计划调度</a>
            </el-tooltip>
          </el-col>
          <el-col :span="3">
            <i class="el-icon-bell"></i>
            <el-tooltip effect="dark" content="对各种突发的情况进行监控并警报,供其他相关用户进行参考。" placement="bottom">
              <a> 异常情况管理</a>
            </el-tooltip>
          </el-col>
          <el-col :span="2">
            <i class="el-icon-setting"></i>
            <el-tooltip effect="dark" content="负责管理用户的相关信息及设置用户的权限。" placement="bottom-end">
              <a> 用户管理</a>
            </el-tooltip>
          </el-col>
          <span class="login-register">
            <a href="../../login.html">登录 |</a>    <!--强烈注意这里的跳转的路径写法!是dist文件下的路径结构的写法!-->
            <a href="/register">注册</a>
          </span>
        </el-row>
      </div>
      <div class="bottom">
        <el-row>
          <el-col :span="14" :offset="2" class="bottom-font">Author : 陈妙纯, 3215004905, 15级计科1班</el-col>
          <el-col :span="8" class="bottom-font">© 2018 Chen Miaochun(3215004905) All rights reserved.</el-col>
        </el-row>
      </div>
      <div class="title">
        物流运输管理系统
      </div>
      <div style="width:130px;height:2px;margin:0px auto;padding:0px;background-color:gray;overflow:hidden;"></div>
      <div class="sub-title">
        便捷物流,智慧运输
      </div>
      <div class="login-button">
        <a href="../../login.html">立即登录</a>
      </div>
    </el-main>
    </template>
    
    <script>
    export default {
      name: 'Home',
      data() {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      methods: {
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    
    <style scoped>
    .title {
      text-align: center;
      font-size: 40px;
      color: #434343;
      margin-top: 60px;
      margin-bottom: 10px;
    }
    
    .sub-title {
      text-align: center;
      font-size: 18px;
      color: #434343;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    
    .login-button {
      width: 90px;
      height: 30px;
      background-color: #434343;
      border: 2px solid #BD3A00;
      margin: 0px auto;
    }
    
    .login-button a:hover {
      color: white;
      background-color: #BD3A00;
      cursor: pointer;
    }
    
    .login-button a {
      color: #BD3A00;
      font-size: 5px;
      display: block;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 30px;  /*same with the button's div's height*/
    }
    
    .login-register {
      position: absolute;
      right: 0;
    }
    
    .bottom {
      width: 100%;
      height: 45px;
      position: absolute;
      z-index: 999;
      bottom: 0;
      left: 0;
      background-color: black;
    }
    
    .bottom-font {
      color: #434343;
      font-size: 2px;
      position: relative;
      margin-top: 12px;
    }
    
    a {
      color: #434343;
      text-decoration: none;
      cursor: pointer;
    }
    
    a:hover {
      color: #BD3A00;
      text-decoration: none;
    }
    
    a:active {
      color: #BD3A00;
    }
    </style>

    4、生成的目标文件:dist/index.html

    <!-- 4、生成的目标文件:dist/index.html -->
    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width,initial-scale=1" />
      <title>miao_lm_frontend</title>
      <link href="/static/css/index.7789c9d1ceb2ad22e145d70d0784c1e7.css" rel="stylesheet" />
     </head>
     <body>
      <div id="app"></div>
      <!-- 这里的插入了三个js文件,配置的部分在utils.js里面的htmlPlugin里,具体是HtmpWebpackPlugin的chunks里面配置。
            而我们上面在代码里的配置,会导致对于每个生成的html文件,都会有文件manifest.xx.js和vendor.xx.js,以及各自html文件对应的js文件,配置多少项就有多少个文件。
            当然,这些文件在可以直接在dist/static/js下看到 -->
      <script type="text/javascript" src="/static/js/manifest.b690e071001d20c7d24f.js"></script>
      <script type="text/javascript" src="/static/js/vendor.4148cab38d584340b81a.js"></script>
      <script type="text/javascript" src="/static/js/index.67cce05b3a519c9f3588.js"></script>
     </body>
    </html>

    5、dist文件夹的详细文件如下:

    所以里面所有的vue用到的页面跳转,都是在dist文件夹的目录结构的基础上写的,比如上面的Home.vue最后是组装到index.js下,而想要跳转到login.html下,不管源代码的目录结构如何,只需要看dist的目录结构配置即可。这里可以看到,index.xx.js是在dist/static/js/index.xx.js下的,所以要跳转到dist/index.html,需要这么写:

    <!--路径的写法规则是:
        ./a.js: 是同级目录下的a.js文件
        ../a.js: 是上层目录下的a.js文件
        ../../a.js: 是上上层目录下的a.js文件
        拿上图的index.xx.js举例:
        ./login.xx.js: 是js文件夹下的login.xx.js文件
        ../css/a.css:是static文件夹下的css文件夹下的a.css文件
        ../../login.html: 是dist文件夹下的index.html文件
    -->
    <a href="../../login.html">登录 |</a>

    至此配置和使用说明完成。

    展开全文
  • vue脚手架

    2021-03-11 14:10:51
    文章目录一、vue脚手架使用二、安装脚手架全局安装项目目录结构2.案例-表格的CRUD点击list显示页面详情页 提示:以下是本篇文章正文内容,下面案例可供参考 一、vue脚手架使用 vue cli :脚手架 Vue CLI 是一个基于 ...


    提示:以下是本篇文章正文内容,下面案例可供参考

    一、vue脚手架使用

    vue cli :脚手架

    Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:

    • 通过 @vue/cli 实现的交互式的项目脚手架。
    • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。

    Vue CLI 致力于将 Vue
    生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需
    eject。

    二、安装脚手架

    全局安装

    npm install -g @vue/cli
    

    选择
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    根据需求配置好后,测试项目是否执行完成,命令行继续输入两条命令:
    在这里插入图片描述

    执行
    在这里插入图片描述
    也可以在文档终端执行(npm run serve)
    在这里插入图片描述
    复制local:地址在浏览器上执行:出现vue 页面说明配置成功了
    代码如下(示例):

    项目目录结构

    在这里插入图片描述

    2.案例-表格的CRUD

    点击list显示页面

    1. 创建list.vue
    2. 在inde.js中使用import引入
      import List from '../views/list.vue'
    3. 添加list的路由以及list对应的组件 {
      path: ‘/List’,
      name: ‘List’,
      component: List
      },
    4. App.vue中添加
      . <router-link to="/List">LIst</router-link>
      在这里插入图片描述

    详情页

    该处使用的url网络请求的数据。

    1. list.vue中在template元素中创建表格
    <template>
      <div class="list">
           <router-link to="/Add">新增</router-link>
        <table>
          <thead>
            <tr>
              <th>编号</th>
              <th>标题</th>
              <th>事件</th>
              <th>操作1</th>
              <th>操作2</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for = "item in posts" :key="item.id">
              <td>{{item.id}}</td>
              <td>{{item.title}}</td>
              <td>{{item.create_time}}</td>
              <td>
                   <router-link :to="{ name: 'Detail', params: { id: item.id } }"
                  >详情</router-link
                >
              </td>
              <td>
                  <!--跳转到edite :to -->
                   <router-link :to="{ name: 'Edite', params: { id: item.id } }"
                  >编辑</router-link
                >
              </td>
               <td>
            <a href="javascript:;" @click="deleteData(item.id)">删除</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>
    
    
    1. 在script元素,data写一些数据
    <script>
    export default {
      data: function () {
        return {
          posts: [
            {
              id: 1,
              title: "今天据说要下雨",
              content: "今天据说要下雨今天据说要下雨今天据说要下雨今天据说要下雨",
              create_time: Date.now(),
            },
            {
              id: 2,
              title: "天气越来越暖和了",
              content:
                "天气越来越暖和了天气越来越暖和了天气越来越暖和了天气越来越暖和了",
              create_time: Date.now(),
            },
           
          ],
        };
      },
     
    };
    </script>
    
    

    . 使用 v-for = “item in posts” :key=“item.id” 将数据循环在表格内

    1. 在index.js中引入
      在这里插入图片描述
      在这里插入图片描述

    添加

    使用form表单的提交方式添加,在button按钮中用 @click=“saveData” 属性填充,
    在这里插入图片描述

    编辑(引入import Edite from ‘…/views/Edite.vue’)

    这里是引用

    在这里插入图片描述

    删除

    在这里插入图片描述

    展开全文
  • 使用vue脚手架搭建项目的方法:1、全局安装vue-cli脚手架;2、打开命令提示符,通过cd命令进入项目所在文件夹;3、创建vue-cli工程项目;4、安装依赖;5、启动项目。本教程操作环境:windows10系统、vue2.9版,该...
  • 4、前面interface.js页面已经有添加Login接口,现在调用此接口,在Login.vue页面添加一个button登录按钮,点击会跳转到主页面 Login.vue 内容 <h2>Login page ()">登录 import mock from '@/mock/...
  • vue 脚手架

    2021-03-11 17:09:49
    脚手架 1、起步 安装: win+R 输入cmd 运行命令 npm install -g @vue/cli 安装中: 安装完成: 2、创建项目 如何创建项目官网步骤 选择好文件夹,按住shift+右键,选择在此处打开 Powershell 窗口 在...
  • 今天发现个情况,刚进入页面时正常的,路由跳转后也是正常的,但跳转回来后页面布局乱掉了,看到的时候觉得挺好笑的,解决方法如下。 //只要在style后加上scoped就可以 <style scoped> .m { width: 1200px; ...
  • 主要介绍了Vue页面跳转传递参数及接收方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • VUE脚手架

    2020-05-02 13:43:16
    vue脚手架一、项目环境配置1、安装 node.js2、 扩展--修改npm 镜像源3、 vue-cli @44、 vue-cli @4安装5、 单文件组件(通过一个.vue为后缀的文件来完成一个组件的封装)6、组件的创建7、变量、函数的使用8、便利:v...
  • 文章首发于个人博客,转载参考请注明来源用vue-cli快速搭建vue脚手架+实现vue页面跳转的小demo 一个简单的 vue 页面跳转示例项目地址???? vue简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式...
  • 1.9.vue脚手架使用

    2021-01-27 22:39:14
    vue脚手架vue脚手架1.vue脚手架作用2.安装2.1安装node和npm2.2配置npm服务器地址(运行cmd 再在命令行输入)2.3安装vue脚手架2.4创建vue项目2.5启动图形界面创建2.6安装插件和依赖3.导入vue项目到编辑工具4.整理项目...
  • 首先在大前提cnpm install后(官网使用的是npm,但这里推荐用cnpm比...不然代码写的不符合它的规范你的编译器会一直报错,如下图安装好脚手架之后就像这样终端输入npm run dev,然后打开localhost:8080就可以看到项目...
  • Vue脚手架项目流程

    2021-02-08 20:13:12
    Vue脚手架项目流程一、Vue脚手架的安装1、node.js安装2、npm3、vue-cli安装二、初始化一个vue项目三、项目目录结构1、主要目录2、核心文件3、关系图四、vue-router1、基本写法及传参的使用2、路由嵌套五、引入...
  • # vue 脚手架使用百度地图申请百度地图Key在vue脚手架引入百度地图在组件中使用百度地图 申请百度地图Key 百度地图官网,一定要点击JavaScript api 在vue脚手架引入百度地图 在vue脚手架中index.html导入百度地图 ...
  • Vue脚手架搭建

    2020-04-08 22:46:46
    Vue脚手架1. 全局安装 webpack2. 全局安装脚手架3. 初始化Vue项目4. 入口页面简介 1. 全局安装 webpack Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件...
  • Vue脚手架是Vue官方提供的标准化开发工具,可以方便我们的开发任务。Vue的脚手架叫Vue CLI,CLI是command line interface的简称。 要想使用Vue脚手架,需要全局安装@vue/cli,在安装之前,需要安装node.js。 node.js...
  • 这两天刚进公司,拉取公司项目下来,安装完依赖,却不能正常跳转。 就像这样, 然后点击就这样,,把我弄懵了, 因为是小白,所以在网上找了一些资料,发现是congig目录下的index.js文件,是和链接地址有冲突的...
  • -- 跳转并携带query参数,to的字符串写法 --> <router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link> <!-- 跳转并携带query参数&#...
  • vue脚手架搭建

    2019-08-23 16:54:45
    vue2:脚手架搭建 简介 vue.js有著名的全家桶系列,包含了vue-router,vuex, vue-resource,再加上构建工具vue-cli,就是一个完整的vue项目的核心构成。 vue-cli这个构建工具大大降低了webpack的使用难度,支持热...
  • 安装vue脚手架

    2020-05-18 16:22:29
    vue2.0 1.vue - V 查看版本,如果出现版本号,之前已经安装过了。如果之前安装的版本是想要的...4.npm install -g vue-cli 安装vue2.0脚手架 5.cd 目录名称 --跳转到目录下,方便找到新建的项目 6.vue init webpack.
  • 脚手架的build文件夹中找到utils.js config里的index.js 应该大部分应该能解决
  • Vue-cli vue脚手架工具

    2021-04-22 10:52:57
    Vue cli是基于Vue的应用开发提供的一个标准的脚手架工具.为应用搭建基础的框架结构,提供插件、开发服务、Preset、构建打包功能 Vue cli 背后集成了现代化开发的诸多功能,通过简单的命令就可以完成 "零配置"的项目...
  • Vue脚手架 快速搭建

    2021-03-09 15:06:03
    vue-cli就是Vue脚手架工具,和我们工地看到的脚手架真是那么一回事,它帮助我们搭建基本的开发环境,好比架子搭建好了,利用它可以搞定目录结构,本地调试,单元测试,热加载及代码部署等。 Vue项目的两种搭建方式...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,266
精华内容 2,106
关键字:

vue脚手架跳转页面

vue 订阅