vue-cli的基本入门教程
- 什么是vue-cli
- 一.安装和使用
- 1.安装
- 2.使用
- 二.介绍项目的目录结构
- 三.了解vue项目的运行流程
- 四.组件的基本使用
- 五.用vue ui 可视化创建项目
什么是vue-cli
vue-cli是Vue.js开发的标准工具。它简化了程序员基于webpack创建工程化项目的过程。 中文官网：https://cli.vuejs.org/zh/
一.安装和使用
1.安装
vue-cli是npm上的一个全局包，使用npm install 命令 ，即可方便地把它安装到电脑上。 在cmd上运行如下命令来安装vue-cli：
代码语言：javascript复制npm install -g @vue/cli可以用下面这个命令来检查其版本是否正确：
代码语言：javascript复制vue -V如果能打印出@vue/cli 版本号，就证明安装成功了。
2.使用
基于vue-cli快速生成工程化地vue项目,在要创建项目的文件夹下运行如下命令：
代码语言：javascript复制vue create 项目名称如我们运行vue create demo-first ,生成一个项目，运行后首先会看到如下提示： 你会被提示选取一个 preset（预设）的选项，第一个选项表示创建的是vue2的项目，第二个选项表示创建vue3的项目，建议初学者选择第三项（手动自定义安装哪些功能，可定制性更高）
选择并运行后，会看到如下的选项：
我们根据自己的需要选择要安装的选项（按空格来选择）
初学vue要把css pre-processors（css预处理器，用于less等）勾上。前期建议把Linter/Formatter 这个去掉，因为它是用来约束代码风格的，如果勾选，你书写有一点不规范，就会报错。后期做项目时再勾选和配置。 所以建议初学，勾选如下三个就可以了：
回车运行代码： 会让我们选择要安装的vue的版本，自己学哪个就选哪个。我这里选2.x
继续回车： 选择Less
再回车： 会让你选择是为Babel和EsLint等创建自己的配置文件，还是把配置放到package.json项目配置文件里。我们选择第一项，创建他们自己的配置文件。
接下来会让你选择是否保存这个preset。下次创建项目时就可以不用配置了
然后就开始创建项目了 但是要注意，创建项目时不要点击cmd窗口，不然就会停止创建项目。
创建好项目后，就可以再项目的根目录下运行npm run serve把项目给跑起来了。
我们复制第一个local链接，在浏览器中打开就能访问到写的项目了
项目跑起来后，如果关掉了cmd窗口，那么项目就被关闭了。重新运行npm run serve就能再次跑起来了。
二.介绍项目的目录结构
用VsCode打开我们创建的项目。 会看到如下的目录：
我们的页面被放到public的index.html中去了。打开index.html
src目录的构成：
assets文件夹：存放项目中用到的静态资源文件。例如：css样式表，图片资源等等。 components文件夹：程序员封装的一些，可复用的组件，都要封装到components目录下。 main.js文件: 项目的入口文件，整个项目的运行，要先执行main.js。 App.vue文件:是项目的根组件。我们浏览器上看到的页面结构就是App.vue里面所呈现出来的。
我们可以把App.vue文件里面的代码全部删除掉，然后自己编写代码如下代码：
代码语言：javascript复制<template>
<h1>App.vue组件！</h1>
</template>template表示一个模板结构，里面的h1表示要把它渲染到页面上去。
三.了解vue项目的运行流程
在工程化的项目中，vue要做的事情很单纯：通过main.js把App.vue渲染到index.html的指定区域中。
打开main.js的代码，下面来对其代码进行解释：
代码语言：javascript复制//导入vue这个包，得到Vue构造函数
import Vue from 'vue'
//导入App.vue这个根组件，将来要把App.vue中的模板结构渲染到HTML页面中
import App from './App.vue'
//开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。此外，有些警告检查还有一些小的运行时开销，这在生产环境模式下是可以避免的。
Vue.config.productionTip = false
//创建Vue的实例对象，
new Vue({
//把rander函数指定组件，渲染到指定区域中去,替换掉#app的这个<div>
render: h => h(App),
}).$mount('#app')
//这个 .$mount('#app'),就是指定渲染的指定区域。
//其实可以把它去掉，然后在render前面添加一个el:'#app',效果也是一样的。
//其实index.html里面那个<div id="#app"></div>只起到占位作用，会被App.vue里面的指定组件给替代掉 vue实例的$mount()方法与el属性的作用是完全一样的。
四.组件的基本使用
在src目录下面创建一个Test.vue，然后自己声明一个模板结构：
代码语言：javascript复制<template>
<div>
<h3>这是用户自定义的Test.vue</h3>
</div>
</template>接下来，在main.js中导入我们自定义的模板结构:
代码语言：javascript复制 import Test from './Test.vue'然后把render里面指定的组件给换成Test:
代码语言：javascript复制new Vue({
//把rander函数指定组件，渲染到指定区域中去,替换掉#app的这个<div>
render: h => h(Test),
}).$mount('#app')浏览器打开项目的网页，则会显示我们上面Test.vue自定义的内容：
这是我学习vue-cli的笔记，有点短，但的确入门这些就够了。从这里开始，后面我学习vue就不再是自己创建html等文件了，而是用vue-cli来自动生成和配置前端工程化项目了。接下来我要学习vue组件和其他新知识了。 希望这篇博客对你们和未来复习的我有所帮助吧。
五.用vue ui 可视化创建项目
我们可以用vue ui来创建可管理我们的项目。主要在命令行下运行vue ui 这个命令就可以。 创建好后，项目运行方式如下：
当项目编译完成后，点击“启动app”把项目跑起来：
