创建Vue前端项目
一、创建Vue前端项目
1、安装 Vue CLI
1.1、下载Node.js
因为需要使用 npm 安装 Vue CLI，而 npm 是集成在 Node.js 中的，所以第一步我们需要安装 Node.js，访问官网 https://nodejs.org/en/，首页即可下载。
下载完成后运行安装包，一路下一步就行。然后在 cmd 中输入 node -v，检查是否安装成功。
出现了版本号（根据下载时候的版本确定），说明已经安装成功了。同时，npm 包也已经安装成功，可以输入 npm -v 查看版本号
输入 npm -g install npm ，将 npm 更新至最新版本。
1.2、安装vue脚手架
使用 npm install -g vue-cli 安装脚手架
注意此种方式安装的是 2.x 版本的 Vue CLI，最新版本需要通过 npm install -g @vue/cli 安装。
2、创建Vue基础项目
第一步：首先，进入到我们的工作文件夹中，执行命令 vue init webpack bookkeeping_front，这里 webpack 是以 webpack 为模板指生成项目，还可以替换为 pwa、simple 等参数。 wbookkeeping_front 是我们的项目名称，大家也可以起别的名字。
第二步：在程序执行的过程中会有一些提示，可以按照默认的设定一路回车下去，这里还会问是否安装 vue-router，一定要选是，也就是回车或按 Y，vue-router 是我们构建单页面应用的关键。还有是否使用 es-lint，也选择Y，接下来等待项目构建完成就 OK 了。
第三步：可以看到 workspace 目录下生成了项目文件夹 wbookkeeping_front，里面的结构如图
第四步：进入项目目录，执行npm run dev，项目构建成功，这一步如果报错，可能是未能加载项目所需的依赖包，即 node_modules 里的内容，需要在该文件夹执行 npm install ，再执行 npm run dev
第五步：访问 http://localhost:8080，查看网页 demo，大工告成！
二、Vue 项目结构分析
1、项目目录分析
使用 CLI 构建出来的 Vue 项目结构是这个样子的， components 文件夹是最常修改的部分，2.x 时代没有创建 view 这个目录，我们也可以认为 Vue 把视图也当做“组件”的一部分。
2、index.html
首页文件的初始代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>wj-vue</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>项目只有这一个 html 文件，所以这是一个 单页面应用，当我们打开这个应用，表面上可以有很多页面.
，下面有一行注释，构建的文件将会被自动注入，也就是说我们编写的其它的内容都将在这个 div 中展示。
3、App.vue
文件称为“根组件”，因为其它的组件又都包含在这个组件中。
.vue 文件是一种自定义文件类型，在结构上类似 html，一个 .vue 文件即是一个 vue 组件。
<template>
<div >
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>这里也有一句 <div >，但跟 index.html 里的那个是没有关系的。这个 id=app 只是跟下面的 css 对应。
