个人网站，前端也打算自己写了，使用vuecli来搭建

项目构建工具：vue-cli 介绍及如何使用

vue-cli也叫脚手架，官方定义为Vue.js开发的标准工具。Vue-cli是一个基于Vue.js进行快速开发的完整系统，可以自动生成Vue.js+webpack的项目模板。官网介绍地址：https://cli.vuejs.org/zh/guide/

1、安装node.js 安装vue.cli 必须先安装node.js

查看nodejs文档

2、全局安装vue.cli

npm install -g @vue/cli

如果有error，重新在执行一遍试试

3、创建项目

vue create 项目名

选择项目配置

• 选择手动配置

• 上下键控制 空格选择 我这里选择Babel转码器 、Router、 Vuex 、Linter / Formatter

 ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end） 测试 

• 选择vue版本

• 直到安装成功（其他步骤省略，根据自己的要求选择即可）
• 启动项目

安装完后会提示进入项目目录执行命令 npm run serve启动项目，启动后打印出访问地址

4、项目结构介绍

4.1目录及文件介绍

assets：静态资源目录

components：公共组件目录

router：路由目录

store：vuex数据存放目录

views：页面目录

APP.vue：入口页面

main.js：程序入口new Vue()等。

package.json：核心配置文件（依赖、启动命令）

5、页面开发案例

• 在页面目录编写一个test页面

<template>
  <div>
    这是一个测试页面
  </div>
</template>

<script>
  export default {

  }
</script>

<style>

</style>

• 在路由目录增加test页面的路由

• 在入口页面App.vue增加test页面的访问路径

页面可以看到Test，点击Test可跳转到Test页面的内容