返回

My Vue App

前端

Vue-cli3.0使用教程

随着Vue-cli 2.X版本的发布,Vue-cli3.0也紧随其后。本文将以教程的形式带大家初探Vue-cli 3.0的强大功能。

新特性概览

相较于Vue-cli 2.X,Vue-cli 3.0带来了诸多更新,包括:

  • 内置webpack 4
  • 支持ES6语法和Module规范
  • 更好地支持PWA
  • 统一的CLI命令
  • 更加完善的脚手架

这些更新让Vue-cli 3.0成为开发Vue.js应用的理想选择。

安装与使用

安装Vue-cli 3.0非常简单,在终端中执行以下命令即可:

npm install -g @vue/cli

安装完成后,使用如下命令创建新项目:

vue create 项目名称

项目结构

Vue-cli 3.0创建的项目结构如下:

├── node_modules
├── package.json
├── README.md
├── src
    ├── App.vue
    ├── main.js
├── static
    ├── index.html
├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── package-lock.json
├── vue.config.js

实战

让我们创建一个简单的Vue应用。在src/main.js中添加以下代码:

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

src/App.vue中添加以下代码:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

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

最后,在static/index.html中添加以下代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

执行npm run serve命令即可启动开发环境。

总结

Vue-cli 3.0是一个功能强大、易于使用的脚手架,可以帮助开发人员快速构建Vue.js应用。本文介绍了Vue-cli 3.0的基本使用,希望对读者有所帮助。