04-Vue-Cli快速入门

Vue-Cli快速入门教程

一、什么是Vue-Cli

vue-cli是vue的脚手架，顾名思义脚手架是可以帮助我们快速搭建项目的工具，而vue-cli则是vue.js+webpack的项目模板。

二、Vue-cli和Webpack的关系

webpack是前端资源模块化管理和打包工具，而vue-cli是基于webpack的，可以理解为对webpack进行了一层封装，我们在使用webpack的时候需要自己手动去引入一些插件，手动去搭建项目的目录结构，而vue-cli则自动帮我们完成这些，省去了开发者自己配置的步骤。

三、前期准备

你需要先安装好node环境，这个比较简单，我就不写教程了，可以看看这里的node环境的安装。

如果你想更好地理解vue-cli，请先看一下webpack，教程在此Webpack快速入门。

四、安装Vue-cli

在终端使用以下命令进行安装

npm install @vue/cli -g

等下载完之后，输入以下指令，若出现版本号，则安装成功

vue -V   //注意V大写

注意：这里指的是vue-cli的版本，不是vue的版本，现在vue主流还是用2的版本。

五、Vue-Cli的使用

5.1创建项目

vue-cli提供了两种创建项目的方法，一种是通过官方提供的可视化操作创建项目在终端使用vue ui指令后就可以在可视化地创建项目了，另一种则是通过命令行的方式来创建，作为一名程序员，当然是使用后者啦~步骤如下：

输入以下命令，回车

vue create 项目名      //默认会加入到git管理
vue create 项目名 -n   //如果不想要git管理，可以使用这条指令

这里是选择配置的方式，第一个是默认，第二是个手动，我们一般选择手动配置（第二个），方向键上下选择，回车下一步。

这里选择需要用到的组件，各个组件的解释如表格。

选项	解释
Babel	一种能让浏览器自动识别向后兼容各版本JavaScript的功能
TypeScript	一种.ts后缀兼容js的语法
Progressive Web App（PWA）Support	渐进式网络应用
Router	vue的路由管理组件
Vuex	vue的状态管理组件
CSS Pre-processors	CSS预编译
Linter/Formatter	代码检验 格式检查
Unit Testing	单元测试 以开发角度测试代码
E2E Testing	e2e测试 以用户角度测试代码

这里我们先暂时选择Babel，Router和Vuex（空格是选中）。

这里是问你router是否使用history模式，先选no，后面会说到，不急。

这里选择如何存放配置，我们选第一个，独立一个文件放置。

最后问你是否保存当前配置，一般选否，因为每个项目的配置都不一样。

然后就开始根据你的选择来创建项目了。

等创建完毕后，可以看到目录多出来这些东西。是不是感觉和webpack有点相似呢？

最后，进入到项目根目录，输入命令启动项目

npm run serve

点开自己的项目地址，看到这个页面就说明成功啦。

5.2项目结构介绍

• public–任何放置在该文件夹的静态资源都会被简单地复制，需要通过绝对路径来引用
• src–存放项目的源码
• assets–放置进过webpack处理的资源
• compnents–组件化开发时存放的组件
• router–vue路由的配置
• store–vuex的配置
• views–页面文件
• main.js–程序的主入口
• babel.config.js–babel的配置文件
• vue.config.,js–相当于webpack.config.js，是项目主要的配置

5.3Vue-Cli模板解读

我们可以看到vue-cli工程里面，文件的后缀不是html/js/css这些，而是.vue，这是Vue-cli的模板，如图：

• <template>标签包裹的内容是HTMLDom结构，写HTML代码的地方。
• <script>标签包裹的内容是页面的逻辑代码，写js代码的地方。
• <style>标签包裹css内容，可以增加scoped属性声明这些样式只在本模板起作用。

5.4Vue-cli的配置文件

从Vue-cli4.x开始，官方将多数配置已经配置好了，不再给用户提供一个配置文件，因此你新建项目的时候是看不到vue.config.js这个文件的，如果开发者需要修改默认配置的话，需要自己手动新建一个vue.config.js在项目根目录下，比如想修改端口号

module.exports ={
    devServer:{
        port: 1904
    }
}

其他大多数操作其实和webpack.config.js差不多，用户都可以在这里修改。

5.5组件化构建一个页面

1. 在components文件夹新建一个组件Welcome.vue，语法方面像vue那样写就行了

<template>
  <div>
      <h2>{{msg}}</h2>
  </div>
</template>

<script>
export default {
    name:'Welcome',
    data(){			//注意这里的data和vue不一样，要以函数的形式返回值
        return {
            msg:'WELCOME'
        }
    }
}
</script>

<style scoped>
    h2{
        font-size: 36px;
        color: red;
    }
</style>

2. 在views文件夹里新建Index.vue页面

   <template>
     <div>
         <Welcome></Welcome>  <!-- 3.组件名为标签使用 -->
     </div>
   </template>
   
   <script>
   import Welcome from '../components/Welcome'   //1.引入刚才的组件
   export default {
       name:'index',
       components:{    //2.注册组件
           Welcome
       }
   }
   </script>
   
   <style scoped>
   </style>
   

3. 进入router文件夹里的index.js，配置路由，路由的操作稍后再讲。

   {
       path:'/index',
       name:'Index',
       component: () => import('../views/Index.vue')
    }
   

4. 来到App.vue，增加一个router-link标签，如下：

   <router-link to="/index">Index</router-link>
   

5. 最后，启动项目，可以看到我们的页面已经生效，并且已经加入到路由里面了

   

6. 至此，一个非常简单的单页面应用完成。

六、总结

本文主要讲述了vue-cli的安装和基本的项目目录结构说明，以及拥有vue基础的人如何通过vue-cli来开始进行页面的开发，由于本文是新手入门教程，因此当中的router和vuex的内容另开一篇博客，请看这里vue-cli中使用router和vuex。