# vue 的豪华版

之前将 vue.js 像 JQ 那样使用,称之为乞丐版,做的应用有限,只使用了 vue.js, 已经有公司使用 vue.js 来代替 JQ 了。如果想要开发更强大更复杂的应用就可以使用 vue 的豪华版。

豪华版的 vue 指的是基于 Nodejs+npm 环境 + webpack+vue.js+vue 的脚手架 + vue 的路由 + vue 的生态工具 + axios 等等组合而成的一套开发模板。

对于新手而言,自己从 0 开始配置一套这样的开发环境比较困难,vue 就提供了一款这样的工具,能够帮助我们快速搭建一套开箱即用的开发模板。

# 什么是 vue 的脚手架

https://cli.vuejs.org/zh/guide/

使用 vue 的脚手架目的就是搭建一个不需要自己配置的 vue 的开发模板。

如果我们使用之前的 webpack 来配置 vue,对于新手而言比较困难,而且容易出错,此时 vue 官方就提供了一套这样内置了 webpack 又不需要我们自己动手去配 webpack 的工具给我们。

很强大:相当于是给我们提供了一套满汉全席的工具。不管是炒一道菜还是一桌菜,都可以用这套工具来实现。

它帮助我们解决了所有配置、所有难的部分,我们只管使用。

# 如何使用 vue 的脚手架

能不能在电脑中执行 vue 这个指令

没有安装 Nodejs 环境 node npm 等指令是不可以用的,没有安装 webpack 包,webpack 指令也不可以使用。

如果没有安装 Vue 的脚手架,是不可以执行 vue 的指令。

  1. 在命令行中执行如下执行

    1
    cnpm i -g @vue/cli
  2. 通过以下指令看是否安装成功

    1
    2
    3
    vue -V
    //如果有版本号则表示安装成功
    4.5.4
  3. 使用指令快速生成一个开箱即用的开发母版

    1
    2
    3
    vue create 项目名
    比如:
    vue create myproject

    使用 vue 的脚手架来生成一个开发 vue 应用的模板,让我们专注于开发项目,而不是去配置环境和工具中。

# 目录介绍

  1. public 就是一公共的静态资源,不需要被打包的部分,里面的 index.html 就是原来放在 src 中的 index.html

  2. src 源代码,写自己代码的地方

    1
    2
    3
    4
    5
    assets  ---放图片、样式、字体等静态资源的
    components 放vue的组件的地方。vue的独立组件
    App.vue 表示主组件(父组件)
    main.js 入口文件
    注意:以上目录可以自定义,即可以按自己的方式来命名
  3. gitignore 用来忽略 git 上传时的非必须上传目录或文件

  4. babel.config.js 让 ES6 转 ES5 的一个插件

  5. package.json 项目的描述文件,有各种依赖包
    https://cli.vuejs.org/zh/guide/plugins-and-presets.html# 远程 - preset

  6. package-lock.json 版本锁定,避免升级某些依赖包出错时,无法找到可用的初始版本号

  7. README.md 给其他人看到的文档说明或项目说明书

APP.vue 和 index.html 的关系

app.vue 指的是 vue 的独立组件,即将乞丐版的组件代码提取出来另存为一个.vue 结尾的文件。

更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

tz 微信支付

微信支付

tz 支付宝

支付宝