初学Vue，小结一下！

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

准备

技术栈

• Html+css+javascript
• webpack
• ES6基本语法
• Vue
• vue-router    路由
• axios    网络要求
• Vuex    状态管理
• scss    css预编译

1、创建第一个Vue项目

        （一）要使用vue来开发前端框架，首先要有环境，这个环境要借助于node，所以要先安装node，借助于node里面的npm来安装需要的依赖等等。 

步骤：https://nodejs.org/en/download/      node官网，选择跟自己的电脑匹配的版本进行下载，然后一步步的安装即可。安装好nodejs和npm，然后输入下面的cmd命令查看是否安装好

                   node -v   查看nodejs版本

                   npm  -v   查看npm版本

这里有一个小技巧：如果在cmd中直接使用npm来安装的一些工具的话会比较慢，所以我们使用淘宝的npm镜像cnpm： 
输入npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装cnpm淘宝镜像安装相关依赖，以后再用到npm的地方直接用cnpm来代替就好了 。

（二）安装vue-cli脚手架构建工具，输入命令cnpm install -g vue-cli 安装完成即可。使用命令 vue -V 测试是否安装成功。

（三）安装完脚手架以后，选定路径（这里我选择e盘下VUE文件夹），新建一个vue项目 vue_project 。

最后一项我选择是No,I will handle that myself  ，手动安装依赖。

出现以下内容表示vue项目创建成功。

进入可以看到如下文件目录。

cmd进入项目，下载依赖： npm install 或者cnpm install 推荐使用cnpm install

依赖下载完成后，项目中会多出一个node_modules文件夹。

运行项目： npm run dev

出现以下提示信息表示运行成功。

这样就算Vue项目构建成功了，在浏览器中输入http://localhost:8080 就可以看到这个页面。

2、Vue项目的目录结构分析

这里，为大家简单介绍以下项目的目录结构，首先，看一下整体项目目录结构的截图：

从最外层说起（根目录文件）：

1. babelrc：作为项目babel的配置文件（Babel 是一个 JavaScript 编译器，作为我们项目对js的编译），可以将我们项目es5以上的语法编译成大多浏览器都支持的es5语法等功能，还可以在这里配置一些框架的按需加载（如element-ui） 

2. .editorconfig：项目中编辑代码风格 

3. .gitignore : 用于git的忽略文件配置（我们使用git提交的时候，有些文件是不需要提交的，如node模块的node_modules文件夹、打包成功的dist文件夹等） 

4. .postcssrc.js: 用于对style的less语法支持配置 

5. index.html: 项目的首页，即我们编写的代码会通过这个文件显示给浏览器 

6. package.json package-lock.json: 这个就不用多说了吧，大家都懂是项目包的依赖文件 7. README.md: 展现在GitHub上的描述文件

build文件夹

1. build.js: 作为项目打包的时候（npm run build）的入口文件，通过这个js将整体项目打包 

2. check-versions.js：用于版本node和npm版本的检测 

3. utils.js：用于项目中关于loader器的引用和项目title、icon等设置 

4. vue-loader.conf.js：因为项目是基于vue的，所以，需要一个vue-loader来识别.vue后缀的文件，这个文件，就是vue-loader的配置文件 

5. webpack.base.conf.js：项目webpack的基础配置文件 

6. webpack.dev.conf.js：开发环境下的webpack配置文件 

7. webpack.prod.conf.js：生产环境下的webpack配置文件

config文件夹

1. dev.env.js、prod.env.js：用于配置项目的环境变量 

2. index.js：用于webpack的一些配置信息

node_modules文件夹 

这个文件夹就不多说了，是项目包存储的地方

src文件夹 

这个文件夹内，就是我们真正项目代码的存储地址 

1. assets文件夹：这里放置项目的模块静态资源，如css，js还有图片、字体 

2. components文件夹：使用vue的都知道，vue是模块化的框架，我们将页面中的元素分模块编写，从而提高代码修改的方便性以及重用的效率，这个文件夹内就是我们项目的模块存放地址 

3. router文件夹：vue-router让我们能处理vue的路由，从而更佳的使用component，这个文件夹内就是个vue-router的配置文件 

4. APP.vue：作为项目的根组件，也就是我们直接吧这个组件装到index.html中进行渲染 

5. main.js：作为webpack项目的入口文件，在这个文件夹内，我们是可以引用静态资源以及对整体vue的配置

static文件夹 

用于存放在整体项目的静态资源，如图片，字体等

3、src文件夹目录初始文件夹的结构关系

1.main.js

main.js主要创建Vue实例,使路由router文件和总组件App结合起来,具体代码作用见下图

2.index.js

index.js是路由文件夹router下面的默认路由文件,具体代码作用见下图

3.App.vue

App.vue就是main.js里的App,当路由文件根据路径匹配到组件时,将组件渲染到<router-view/>标签所在的位置

4.HelloWorld.vue

HelloWorld.vue可以作为特定功能的组件,App.vue这样的组件可以作为固定的内容,比如页面导航栏之类的

文件路由图