# 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
cnpm i -g @vue/cli
-
通过以下指令看是否安装成功
1
2
3vue -V
//如果有版本号则表示安装成功
4.5.4 -
使用指令快速生成一个开箱即用的开发母版
1
2
3vue create 项目名
比如:
vue create myproject使用 vue 的脚手架来生成一个开发 vue 应用的模板,让我们专注于开发项目,而不是去配置环境和工具中。
# 目录介绍
-
public 就是一公共的静态资源,不需要被打包的部分,里面的 index.html 就是原来放在 src 中的 index.html
-
src 源代码,写自己代码的地方
1
2
3
4
5assets ---放图片、样式、字体等静态资源的
components 放vue的组件的地方。vue的独立组件
App.vue 表示主组件(父组件)
main.js 入口文件
注意:以上目录可以自定义,即可以按自己的方式来命名 -
gitignore 用来忽略 git 上传时的非必须上传目录或文件
-
babel.config.js 让 ES6 转 ES5 的一个插件
-
package.json 项目的描述文件,有各种依赖包
https://cli.vuejs.org/zh/guide/plugins-and-presets.html# 远程 - preset -
package-lock.json 版本锁定,避免升级某些依赖包出错时,无法找到可用的初始版本号
-
README.md 给其他人看到的文档说明或项目说明书
APP.vue 和 index.html 的关系
app.vue 指的是 vue 的独立组件,即将乞丐版的组件代码提取出来另存为一个.vue 结尾的文件。