Vue脚手架Vue-CLI的学习使用教程

Vue-CLI是Vue.js的官方脚手架工具，使我们可以非常方便地搭建Vue.js项目。下面我们将详细讲解Vue-CLI的学习使用教程。

安装

使用命令行工具打开终端，输入以下命令：

npm install -g vue-cli

说明：

• npm：Node.js包管理器。
• -g：全局安装。
• vue-cli：Vue-CLI包的名称。

创建Vue.js项目

在终端中，进入项目所在目录，然后运行以下命令：

vue init webpack my-project

其中，my-project为你项目的名称。

运行以上命令后系统会自动构建一个基于webpack模板的Vue.js项目。

接着按照系统提示，填写项目信息即可完成。填写信息时需要进行一些选择，如下所示：

• Project name：项目名称，填写你的项目名称即可。
• Project description：项目描述，简要说明项目的作用。
• Author：作者名称，填写作者的名字或者组织名称。
• Vue build：构建方式，选择默认的Runtime + Compiler。
• Install vue-router：是否安装路由模块Vue-Router，选择 Y。
• Use ESLint to lint your code：是否使用ESLint校验代码规范，选择Y，这样可以方便我们写出规范的代码。
• Set up unit tests：是否设置单元测试，选择N。
• Setup e2e tests with Nightwatch：是否设置E2E测试，选择N。
• Should we run npm install for you after the project has been created? (recommended)：项目完成后是否安装依赖项，选择 Y。

填写完毕后，系统便会为你创建一个 Vue.js 的项目，并将各个模块、依赖包下载完成。

启动项目

进入到项目的根目录，运行以下命令即可启动项目：

npm run dev

然后便可以在浏览器中访问 http://localhost:8080 查看项目运行效果。

示例说明

创建一个简单的Vue.js单文件组件

在Vue.js项目的根目录下，创建一个名为HelloWorld.vue的文件，输入以下代码：

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

<script>
export default {
  data () {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

接着，在App.vue文件中引入这个组件：

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

修改Webpack配置

如果我们需要修改Webpack的配置，可以查找项目根目录下的webpack.config.js文件，进行修改即可。

例如，我们想要在Webpack中添加一个别名，以使我们在代码中通过别名快速引用某个模块，可以在该文件中进行如下配置：

resolve: {
  alias: {
    'assets': '@/assets',
    'components': '@/components',
    'views': '@/views'
  }
}

这样我们在代码中便可以以'@/assets'、'@/components'、'@/views'的方式引入对应的模块了。

结语

以上就是Vue-CLI的使用教程，总结来讲就是：安装Vue-CLI，创建项目，启动服务，进行开发。在项目开发过程中可以根据需要修改Webpack的配置，使开发变得更加高效。