最新消息:文章中包含代码时,请遵守代码高亮规范!

vue-cli【原创】

JavaScript Michael 327浏览 0评论

Vue 是什么?

为了实现前后端分离的开发理念,开发前端 SPA(单网页应用) 项目,实现数据绑定,路由配置,项目编译打包等一系列工作的技术框架;

我们说的 vue 不仅仅是 vue.js 这一个文件,而是围绕 vue.js 配套的一系列的工具

使用到的相关工具: vue2+vue-router2+webpack+vue-cli

一.vue-cli构建项目

(详情步骤请查看个人另一篇博客:http://blog.yayuanzi.com/23564.html

这里当你已经配置好nodejs环境;

vue-clivue的脚手架工具,我们首先需要安装vue-cli,命令如下:

cnpm install -g vue-cli

(这个命令只需要运行一次就可以了。安装上之后,以后就不用安装了。)

进入到对应的目录之后,我们按照下面的代码逐条输入,新建一个自己的vue项目

vue init webpack vue-demo

输入这个命令之后,会出现一些提示,是什么不用管,一直按回车即可

如上图所示,就说明我们的项目构建成功了。并且,给出了下面要执行的命令,我们来逐条执行:

cd vue-demo

cnpm install

最后,执行下面一句,把项目跑起来

cnpm run dev

执行后,终端如图:

好,到这里,我们已经顺利的安装了 nodejs 环境和 vue-cli脚手架工具,并且利用脚手架工具生成了一个基于webpack的项目。

你的第一个基于vue 项目已经顺利的执行了。

 

二.vue-cli构建项目-目录以及文件结构

build

这个是我们最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管。

config

项目基本设置文件夹(dev.env.js开发配置文件,index.js配置主文件,prod.env.js编译配置文件)

node_modules

项目依赖包文件夹

src

我们的项目源码编写文件

static

资源目录,我们可以把一些图片,字体,放在这里

test

初始测试目录,可以删除

.xxxx文件

这些是一些配置文件,包括语法配置,git配置等。基本不用管

index.html

项目入口文件,基本不用管,如果是开发移动端项目,可以在head区域加上你合适的meta头

package.json

项目依赖包配置文件

README.md

项目说明文档

 

重要的src文件夹

如上图所示,这是src文件夹下面的初始情况,里面有一些示例代码之类的

components目录里面放了一个演示的组件文件,你可以打开看下

App.vue是项目入口文件

main.js这是项目的核心文件。全局的配置都在这个文件里面配置

 

eg:

如上所示,根据项目需要新建对应的文件夹和文件

components 件文件们写的一些公用的容可以放在里的
config 核心配置文件
frame 存放路由的文件
page 目模板文件,所有的面文件全部存放此,后面根据需要建立各子目
style 式存放目

 

三.vue-cli构建项目配置路由

这里,我们假设我们的项目是做两页面,一个列表页面,一个内容页面。列表页面有分页等,内容页面展示。

因此,我们需要两个模板文件。

我们在src/page目录下面新建两个文件,分别是index.vue和content.vue

代码分别是

index.vue
<template>
  <div>index</div>
</template>
content.vue
<template>
  <div>content</div>
</template>
这里,我们只要先把基础的内容写好就是了。我就用两个单词代表我们的页面
  1. 安装Vue-router2接下来,我们需要安装vue-router2到我们的项目。参考文档见VueRouter2安装文档

    在终端中,我们把当前目录跳转到我们的项目,然后执行cnpm install vue-router -D命令。

    我们查阅文档,会知道,命令是cnpm install vue-router,那为什么我后面加一个-D的参数呢?这个是为了让我们的安装的vue-route这个插件写入到package.json配置文件中。以便于下次再其他地方安装的时候,可以一并安装进去,否则,还得再安装一遍。

  2. 配置main.js通过在终端中执行命令,我们已经安装好路由了。下面,我们需要在src/main.js文件中进行配置。
    整理代码如下:

    // 引用 vue 没什么要说的
    import Vue from ‘vue’
    // 引用路由
    import VueRouter from ‘vue-router’
    // 入口文件为 src/App.vue 文件 所以要引用
    import App from ‘./App.vue’
    // 调用api.js
    import api from ‘./config/api’
    // 引用路由配置文件
    import routes from ‘./config/routes’
    // 光引用不成,还得使用
    Vue.use(VueRouter)
    // 引用api
    Vue.prototype.$api = api
    // 使用配置文件规则
    const router = new VueRouter({
      routes
    })
    // 跑起来吧
    new Vue({
      el: ‘#app’,
      router,
      components: { App },
      template: ‘<App/>’
    })
  3. 配置App.vue
    <template>
      <div id=”app”>
        <router-view></router-view>
      </div>
    </template>

    <style></style>

    <script>
    export default {
      components: {}
    }
    </script>

    就只是一个单纯的路由入口页面

  4. 配置router/index.js
    // 引用模板
    import index from ‘../page/index.vue’
    import content from ‘../page/content.vue’
    // 配置路由
    export default [
    {
      path: ‘/’,
      component: index
    },
    {
      path: ‘/content’,
      component: content
    },
    ]

    如上,我们引用模板,然后再配置路由,这里,我们没有涉及自路由的内容,我们先这样配置上。然后,我们就可以在终端里面输入 cnpm run dev来看我们做的效果了。

  5. 如果不出意外的话,应该能够顺利的跑起来了。

  6. 简单的路由跳转我们修改src/page目录下面的index.vue代码,修改后的代码如下:
    <template>
    <div>
      <h1>Api test</h1>
      <button@click=”btn”>add</button>
    </div>
    </template>
    <style></style>
    <script>
    export default {
    data() {
      return {}
    },
    methods: {
      btn(){
        this.$router.push({path: ‘/content?’ })
      }
    },
    }
    </script>

    点击按钮则跳转到

四.vue-cli构建项目列表循环

我们修改src/page目录下面的index.vue代码,修改后的代码如下:

<template>
<div>
  <h1>Api test</h1>
  <ul>
    <liv-for=”item in items” v-text=”item.title”></li>
  </ul>
</div>
</template>
<style></style>
<script>
export default {
  data() {
    return {
      items: [{
        id: 1,
        title: ‘test title 1’
    },{
        id: 2,
        title: ‘test title 2’
    }]
  }
 }
}
</script>

如上,我们通过自己写的两组数据,很轻松的将页面渲染成功了。通过浏览器,我们可以看到效果

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/23691.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Michael的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!