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

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

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

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） 测试 

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

安装完后会提示进入项目目录执行命令 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>

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

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