一份超级详细的Vue-cli3.0使用教程【推荐】

一份超级详细的Vue-cli3.0使用教程

简介

Vue-cli3.0是Vue.js 官方提供的一个基于 webpack4 和 Webpack-dev-server 的脚手架工具，用于快速构建vue项目开发环境。本教程将为您带来Vue-cli3.0的完整使用攻略，从安装到构建一个简单的Vue项目，让你轻松掌握Vue-cli3.0的使用方法。

安装Vue-cli3.0及相关环境

在开始使用Vue-cli3.0之前，需要安装Node.js环境，可到官网（https://nodejs.org/）下载最新版本。安装完成后，使用npm安装Vue-cli3.0：

npm install -g @vue/cli

安装完成后，可以使用Vue-cli3.0的命令行工具创建一个Vue.js项目：

vue create my-project

Vue-cli3.0项目目录结构

创建Vue-cli3.0项目后，我们来看一下项目的目录结构：

my-project # 项目名称
├── node_modules # 项目依赖
├── public # 静态资源目录
│   ├── favicon.ico # 网站图标
│   └── index.html # 主页模板
├── src # 项目核心代码
│   ├── assets # 静态资源
│   ├── components # 组件目录
│   ├── router # 路由目录
│   ├── views # 视图目录
│   ├── App.vue # 根组件
│   └── main.js # 项目主入口文件
├── .browserslist # 浏览器兼容性配置文件
├── .eslintrc.js # eslint配置文件
├── .gitignore # git忽略配置文件
├── babel.config.js # babel配置文件
├── package.json # 项目配置文件
└── README.md # 项目说明文件

构建一个简单的Vue项目

创建一个简单的Vue项目步骤：

步骤一：创建项目

vue create my-project
cd my-project

步骤二：安装element-ui组件库

npm install element-ui -S

步骤三：配置ElementUI

在main.js中编辑如下代码：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入element-ui组件库
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

步骤四：定义一个最简单的vue组件

在src/components目录下创建一个HelloWorld.vue组件：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to our Vue.js app!'
    }
  }
}
</script>

<style scoped>
.hello {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

步骤五：配置路由

在src/router目录下创建router.js文件：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

步骤六：修改App.vue

我们打开src/App.vue文件，可以看到一个空的单文件组件。

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

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

<style>
</style>

修改App.vue, 把我们前面定义的HelloWorld组件插入到router-view中:

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

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

<style>
</style>

步骤七：启动项目

npm run serve

最后，在浏览器中输入http://localhost:8080/home 就可以看到效果了。

总结

通过本教程，我们了解了如何安装Vue-cli3.0及相关环境，Vue-cli3.0项目目录结构以及如何构建一个简单的Vue项目。希望这份超级详细的Vue-cli3.0使用教程可以帮助你更快地掌握Vue-cli3.0的使用方法。