vue前端框架实用基础篇

Posted 2021-04-05 LNMP开发者

vue前端框架现在使用的公司越来越多了，基于它的技术社区现在已经比较健全和活跃，各种扩展功能也比较完善，而且也在持续维护和更新。

对于这篇我来给大家介绍下vue框架基础项目搭建，在安装vue初始化项目之前，大家需要安装nodejs和npm，或者是cnpm，安装一个自个顺手的代码IDE。

(1) 首先需要安装vue-cli脚手架和webpack

cnpm install -g vue-cli

cnpm install -g webpack

##测试vue-cli是否安装

vue -V        //vue-cli版本是2.8.2

##测试webpack是否安装

webpack -v //webpack环境是3.6.0

(2) 执行下面的命令来执行vue实始化项目

vue init webpack vueceshi5

按着提示把项目初始化安装好，需要注意的一点是eslint格式书写代码可以写为n，我一般都是进行关闭，如果有小伙伴对于eslint比较熟悉的话可以打开：）

(3) 项目完成之后，运行我们的项目

cnpm install //执行安装需要的扩展

cnpm run dev //运行启动vue项目

(4) 成功如下图显示表示成功

(5) 修改内容输出如下图所示内容：

需要添加一件vue组件ceshi.vue

<template>

  <div class="ceshi">

    {{ msg }}

  </div>

</template>

<script>

export default {

  name: 'ceshi',

  data () {

    return {

      msg: '平哥，安哥，小玉姐，helloword'

    }

  }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

</style>

修改路由加载ceshi组件，在router文件夹下的index.js修改如下

export default new Router({

  routes: [

    {

      path: '/',

      name: 'ceshi',

      component: ceshi

    }

  ]

})

在后期的章节中我会给大家继续完善对vue框架的应用操作，如果本篇对大家有用就点个赞或者转发下呗~