• 16 Vue-cli脚手架介绍与使用


    1. vue-cli -命令行界面, 但是俗称脚手架.

    如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI.如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI,使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作,那无以效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。

    CLI是什么意思?

    • CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.
    • Vue CLI是一个官方发布 vue.js 项目脚手架
    • 使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.

          npm安装,  由于国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。

        你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

    npm install -g cnpm --registry=https://registry.npm.taobao.org

          这样就可以使用 cnpm 命令来安装模块了:

    cnpm install [name]

          npm-nodePackage Manager,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。

    后续我们会经常使用NPM来安装一些开发过程中依赖包.

    1.1 安装cli

    1.   npm config get prefix    配置path

    2   npm install -g cnpm --registry=https://registry.npm.taobao.org


    第三步(最关键!)

    npm i npm -g
    npm i @vue/cli -g //如果还报错也没关系,继续执行下面的命令
    cnpm i @vue/cli -g
    • 注意:上面安装的是Vue CLI3的版本,如果需要想按照Vue CLI2的方式初始化项目时不可以的。
    • Vue CLI2初始化项目       vue init webpack my-project
    • Vue CLI3初始化项目       vue create my-project

    image_thumb1[1]

    1.2 创建脚手架2项目


    image_thumb3

          具体每一步解释

    image_thumb5

    目录结构解释

    image_thumb7

           node基于c++开发,具有V8引擎(也是基于c++开发),这个v8引擎是谷歌开发,非常厉害的一款软件,它可以说是将js代码直接转为二进制,这样浏览器显示快速。而传统浏览器js转为字节码转给浏览器,那样会慢些。因此node可以直接运行js文件。

    image_thumb9

    image_thumb11

    1.3 ESLINT关闭位置

    image_thumb1

    1.4 runtime-only 和runtimecompiler

         区别只在main.js中






  • 相关阅读:
    170120、java 如何在pdf中生成表格
    170119、100亿数据1万属性数据架构设计
    170118、快速失败Vs安全失败(Java迭代器附示例)
    170117、spring解决乱码
    170116、centos6.4下nginx和ftp搭建图片服务器
    170113、CentOs6.4中安装和配置vsftp简明教程
    linux nginx完全卸载
    DevOps 的技术栈与工具链
    git与pycharm结合使用
    JMeter和JMeterPlugin的下载安装
  • 原文地址:https://www.cnblogs.com/rango0550/p/14049563.html
Copyright © 2020-2023  润新知