vue-cli基础入门教程

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：

npm install -g @vue/cli

可以用下面这个命令来检查其版本是否正确：

vue -V

如果能打印出@vue/cli 版本号，就证明安装成功了。

2.使用

基于vue-cli快速生成工程化地vue项目,在要创建项目的文件夹下运行如下命令：

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文件里面的代码全部删除掉，然后自己编写代码如下代码：

<template>
  <h1>App.vue组件！</h1>
</template>

template表示一个模板结构，里面的h1表示要把它渲染到页面上去。

三.了解vue项目的运行流程

在工程化的项目中，vue要做的事情很单纯：通过main.js把App.vue渲染到index.html的指定区域中。

打开main.js的代码，下面来对其代码进行解释：

//导入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，然后自己声明一个模板结构：

<template>
    <div>
        <h3>这是用户自定义的Test.vue</h3>
    </div>
</template>

接下来，在main.js中导入我们自定义的模板结构:

 import Test from './Test.vue'

然后把render里面指定的组件给换成Test:

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”把项目跑起来：