新手小白Vue项目初上手

1 Vue CLI图形用户界面(GUI)

Vue CLI引入了图形用户界面（GUI）来创建和管理项目，功能强大，给初学者提供了很多便利，可以快速搭建一个Vue项目。
打开命令行工具，输入命令：vue ui，打开图形用户界面。如下图所示。

在浏览器地址栏输入http://localhost:8000，打开图形用户界面。如下图所示。

如上图所示的界面类似于一个控制台，以图形化的界面引导开发者去进行项目的创建，根据项目的需求去手动创建并选择配置。界面有3个导航，表示的含义如下。

• 项目：项目列表，展示使用此工具生成过的项目。
• 创建：创建新的Vue项目。
• 导入：允许从目录或者远程GitHub仓库导入项目。

在屏幕底部的状态栏上，可以看到当前目录的路径，单击水滴状图标按钮可以更改页面的主题（默认的主题为白色）。

2 使用Vue CLI构建项目

单击顶部导航栏的“创建”选项，然后单击“在此创建新项目”按钮，会进入一个创建新项目的页面。

在顶部项目文件夹标题下输入项目名，包管理器选择默认，Git选项根据需求选择是否初始化到云端，公司内部项目不建议上传。

点击“下一步”按钮，进入预设界面。选择“手动”并点击“下一步”按钮。此处需要选中的项为：Babel、Router、使用配置文件。


点击下方“创建项目”按钮，弹出一个对话框会提醒是否需要保存当前的预设功能。此处自行选择，可以不保存并点击“创建项目，不保存预设”，也可以在输入预设名后选择“保存预设并创建项目”。

创建项目成功后，再来看图形化用户界面。左侧有导航菜单。

点击“插件”到插件管理的页面，点击右上角的“添加插件”。搜索“vue-cli-plugin-element”，选择并安装插件。这是一个组件库。具体使用方法在Element-UI官网查看文档。

选中项目仪表盘中的“依赖”，进入依赖管理界面，点击右上角的“安装依赖”，安装“less”和“less-loader”两个依赖，这两个是CSS的预处理器。

3 运行Vue项目

选中项目仪表盘中的“任务”，进入任务管理界面。选中“serve”，再点击右侧的运行。如下图所示。

成功运行后，到浏览器的地址栏中，输入地址：http://localhost:8080

打开新建的项目。如下图所示。

4 修改Vue项目

4.1 main.js

修改后的代码如下。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'

Vue.config.productionTip = false

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

4.2 App.vue

修改后的代码如下。

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

<script>

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

<style>

</style>

4.3 router\index.js

修改后的代码如下。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/Login' },
  { path: '/Login', name: 'login', component: Login }
]

const router = new VueRouter({
  routes
})

export default router

5 发布Vue项目

在项目仪表盘中选中“任务”，再选择“build”，点击右侧运行。

编译完成后，到项目文件夹中，找到dist文件夹。如下图所示。

打开dist文件夹，将文件夹内所有内容复制到网站目录下。