• vue-cli3快速原型开发


    先来讲一下,什么是快速原型开发。

    当我们需要紧急或提前开发单独的一个页面时,有时候不需要在原项目中创建一个页面,再开发,我们可以单独的区开发这个项目,那么怎样单独的区开发这个项目呢,之前使用过vue-cli的都知道,用vuecli创建出来一个项目需要有各种配置啊,入口文件啊,出口文件啊什么的,但是vue-cli3为我们提供了一项快速原型开发模式,我们不需要去配置这些东西(有需要也可以配置),就可以快速的去开发者个单独的页面。下面来说一下步骤:

    实现需要准备必备条件:

    node安装上(8.11+)。

    若之前安装过vue2的vue-cli,则需要先卸载它,在安装vue-cli3

    首先,卸载老的vue-cli

    npm uninstall vue-cli -g

    安装一个新vue-cli

    npm install -g @vue/cli

    你还可以用这个命令来检查其版本是否正确 (3.x):

    vue --version

    以上步骤每台电脑上只需要进行一次,以后就不需要进行了。

    快速原型开发

    你可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发,不过这需要先额外安装一个全局的扩展:

    npm install -g @vue/cli-service-global

    vue serve 的缺点就是它需要安装全局依赖,这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。

    vue serve(开发模式)

    我们需要建立一个入口文件,在这里开发(App.vue)

    <template>
      <h1>Hello!</h1>
    </template>

    然后在这个 App.vue 文件所在的目录下运行:

    vue serve

    然后在浏览器地址栏输入http://localhost:8080/app就可以访问App.vue页面了

    vue serve 使用了和 vue create 创建的项目相同的默认设置 (webpack、Babel、PostCSS 和 ESLint)。它会在当前目录自动推导入口文件——入口可以是 main.jsindex.jsApp.vue 或 app.vue 中的一个。你也可以显式地指定入口文件:

    vue serve MyComponent.vue

    如果需要,你还可以提供一个 index.htmlpackage.json、安装并使用本地依赖、甚至通过相应的配置文件配置 Babel、PostCSS 和 ESLint

    vue build(生产环境)

    你也可以使用 vue build 将目标文件构建成一个生产环境的包并用来部署:

    vue build app.vue

    以上就是快速原型开发的全部内容。

  • 相关阅读:
    阿里云证书nginx无法访问带点的路径
    升级阿里云服务器文案
    html模板结合JS替换函数,生成新的记录
    企业使命、原景、战略、战略目标 详解
    Android之Handler用法总结【转】
    android activity的常用代码:关闭、传值、返回值、回调、网页、地图、短信、电话
    PHP十进制转36进制的函数
    [转]仓库管理必须知道的的50条重要知识
    [转]关于项目管理、软件开发的一些思考
    PHP5.5安装PHPRedis扩展
  • 原文地址:https://www.cnblogs.com/fqh123/p/10727576.html
Copyright © 2020-2023  润新知