前提条件：

熟悉使用Javascript HTML5 css3。了解ES2015模块(导出、导入、导出-默认)。了解nodejs的基本知识、npm常用命令以及npm脚本的使用(在vue项目中，npm用于包管理)。了解webpack打包工具(常见的配置选项和加载器概念)。(Webpack webpack.github.io/是一个模块打包工具。它将一堆文件中的每个文件作为一个模块，找出它们的依赖关系，并将它们打包成可部署的静态资源。webpack的使用还需要安装npm)。

开始安装：

使用vue-cli构建大型单页应用程序：vue.js的脚手架工具

执行以下代码来完成项目的基本构造(配置的webpack、安装的依赖包和生成的基本目录)。

#全局安装vue-CLI $ npminstall-全局vue-CLI #基于webpack模板创建新项目$ vue init webpack my-project#安装依赖项，转到您的$ CD my-project $ npminstall $ npmrundev主目录：

基本配置、开发环境配置、生产环境配置的build//webpack config//路径、端口和反向代理配置打包dist//WebPack 依赖于Node _ Modules安装的包//NPM 前端主文件 资产//静态资源fontimgscss组件//单个组件XXX . vue ./全局变量app。巴别塔/巴别塔配置项目。editor config//编辑配置目录 index.html//entry页面包. json //项目描述和依赖包. json文件描述：项目描述和依赖

1.脚本：用于编译项目的一些命令

示例：执行npm run dev，即在脚本中执行相应的节点build/dev-server.js。

2.依赖性：项目发布时的依赖性

示例：执行npm install wx - save，即安装依赖模块wx。

3.开发依赖：项目开发中的依赖

示例：执行npm install sass - save-dev，即安装依赖模块sass。

附件：npm相关说明：

Npm是node.js的版本管理和依赖包管理的工具，通过node环境安装前端建设项目所需的依赖包。

npm安装的下载速度太慢，所以使用淘宝镜像cnpm install快速安装。设置方法：

$ NPM install-g cnpm-registry=https://registry . NPM .淘宝. org

项目加载过程：

1.index.html佩奇

目前建设项目为SPA(单页申请)，index.html页为入口页，配置meta等相关页面。

此页面的div id='app'/div装载主要组件。

2.main.js:主入口文件

注意：set-entry : { app 3360 }。webpack.base.config中的/src/main.js'}

该文件初始化vue实例并介绍相应的模块(在介绍之前需要在package.json中确认配置和安装)，介绍和描述main.js:

从' vue' /导入vue导入应用程序'中导入Vue。/App//import主组件app.vue从路由器导入'。/router '/import路由配置文件从' axios' /导入axios/导入网络请求工具axios

3.App.vue:主要组件

主组件安装在index.html的门户页面上，并被引入main.js的主门户文件中

创建其他组件(例如：/src/components/xxx.vue)后，可以通过路由配置在当前主组件中呈现。

4.路由器配置

路由配置：将组件映射到路由，然后告诉vue-router在哪里呈现它们。

npm从“vue”安装vue-routerimport Vue

从“虚拟路由器”导入路由器

用户(路由器)

//1.定义(路由)组件：导入(当前应用程序中的单个文件组件)。从导入主页./组件/Home.vue '

//2.定义路由并创建路由器实例，然后传递“路由”配置。//每条路由应该映射一个组件。var路由器={}

导出默认路由器=新路由器({ routes: [ { path: '/'，名称： 'home '，组件： Home } ]})

//3.在main.js主入口文件中创建并挂载根实例。//记得通过路由器配置参数注入路由，//这样整个应用都有路由功能

新Vue({ el: '#app '，路由器，模板： 'App/'，组件： { App }})

//现在，应用程序已经启动！