Vue项目配置

1.创建项目

两种方式：

命令行创建

vue init webpack Vue_Programs(其中Vue_Programs是本地文件夹名）
按要求输入项目名称和描述、作者、是否安装vue-router、是否使用ESLint管理代码、设置单元测试、设置e2e测试。

vue可视化页面创建

终端中输入vue ui，出现可视化页面。
选择本地创建项目的目录

输入项目名称和git初始化仓库--【手动配置】--下一步（开启Babel、Router、Linter/Formatter、使用配置文件）--下一步【不使用历史路由、Pick a lineter/formatter config选择ESLint+Standard config、Pick additional lint features选择Lint on save（只要保存，就会进行可视化校验）】

安装插件：

命令行安装：

npm install 包名

vue可视化界面中安装：

项目仪表盘--插件--右上角添加插件--搜索（vue-cli-plugin-element) --右下角安装

配置插件：How do you want to import Element?选择Import on demand，Choose the locale you want to load.选择zh-CN（默认）

 2.启动项目

命令行方式：进入项目目录，在终端中输入npm run dev
图形化方式：在项目-任务中启动Dev

3.vue项目中的文件结构

vue调用顺序：index.html--->main.js--->App.vue--->index.js--->components组件。

index.html VS main.js  VS App.vue：
Index.html：所有Vue组件都是通过index.html进行渲染加载的，所有Vue文件都是单页面形式开发。
main.js：Java的入口函数，控制初次启动Vue项目要加载的组件。
App.vue：根组件。export中的name属性组件名字。created：生命周期函数。
Index.js：引入组件的代码。routes定义时，path为你以后页面间路由跳转的路径。name为import进来的名字，component也是这个名字。

因此，要想构建我们自己的vue项目，分别需要：

1）清除App.vue文件中的多余部分，只保留<template><script><style>。并在<template>中添加路由展位符<router-view>。

2）删除components目录下的HelloWorld.vue文件

3）删除index.html中多余的部分

4）删除view目录下的Home.vue和About.vue文件。

5）配置routerm目录下的index.js文件。导入登录组件，并定义路由规则。