VUE安装

VUE之windows安装

VUE介绍

VUE作为目前常用的一种前端技术，现在已经被广泛使用了，当然它也确实比较简单好用，并且是轻量级。
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
我也是刚刚结束vue，跟大家一起来学习。

vue安装必不可少的环境

1. 安装nodejs , node 安装后npm，也就安装好了。 或者安装一个nvm，它可以管理当前node的使用版本。
2. 安装脚手架命令是： npm install --global vue-cli
   –global这是全局安装。
   我用的nvm 放到d盘了。如果你用的是npm安装的 ，默认是安装在C:\Users\Administrator\AppData\Roaming\npm 路径下 ，
   有vue的相关脚本文件那就是安装成功了。

创建项目

创建项目： cmd 命令窗口，cd 到工作空间（VUE项目存放的地方），创建命令： vue init webpack myVue ,。myVue是项目名哦。这时候会有一些问答题；

1. project name : 这个就比较简单了吧。项目名称。回车是默认值。风格
2. project description ： 项目描述。这个随便。默认就是那个A vue.js project。
3. author : 作者！
4. vue bulid : 默认就行，创建一个独立脱机环境。standalone。
5. install vue-router : 是否安装路由，这里默认就行，这样生成好的项目就会有相关的路由配置文件
6. use ESlint to lint your code : 这里选择yes,默认使用，这样会生成相关的ESLint配置.
7. pick an ESLint preset: 这个选择标准就行：standard，也是默认值。
8. set up unit tests : 是否安装单元测试，这个不用了吧！ no.
9. setup e2e tests with nightwatch: 是否安装e2e测试。不用了 no！
10. Should we run " npm install" for you after the project has been create
    在创建项目之后，我们是否应该为您运行“NPM安装”。 这个默认就行，人家官方也推荐。回车。

安装进行时… … 需要一小会。

安装完成后，他会提示你运行项目。 输入它提示的命令就行。
cd tests
npm run dev

运行完成后，本地浏览器访问：localhost:8080

界面显示是：

项目目录介绍

1. 总结的文件结构 如图：
   

2. bulid 文件夹：
   
   如上图，这个文件夹主要是进行webpack的一些配置，就我个人觉得啊~对我们最有用并且可能会使用的就是webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js三个webpack的配置文件，分别是基本webpack配置、开发环境配置、生产环境配置。实际上这些文件里面的内容，一些简单的配置都已经有了，包括入口文件、插件、loader、热更新等都已经配置好了。我们要做的只是根据自己的项目有什么loader需要增加的，比如生成环境需要加上UglifyJsPlugin插件等可以自行配置，或者一些插件增加或者不需要的删除，其实都是和业务相关了，其他的都可以不需要动。

3. config文件夹：
   

这几个配置文件我觉得最主要的就是index.js 这个文件进行配置代理服务器，这个地方和我们息息相关，和后台联调就是在这里设置一个地址就可以了。打开index.js 找到“proxyTable“这个属性，然后在里面加上对应的后台地址即可。
4. src文件夹：
assets: 共用的样式、图片

“components”: 业务代码存放的地方，里面分成一个个组件存放，一个页面是一个组件，一个页面里面还会包着很多组件

“router”: 设置路由

“App.vue”: vue文件入口界面

“main.js" 对应App.vue 创建vue实例，也是入口文件，对应webpack.base.config.js里的入口配置

5. static 文件夹：
   存放的文件不会经过webpack处理，可以直接引用，例如swf文件如果要引用可以在webpack配置对swf后缀名的文件处理的loader，也可以直接将swf文件放在这个文件夹引用

6. package.josn
   这个文件有两部分是有用的：
   scripts 里面设置命令:
   例如设置了dev用于调试则我们开发时输入的是npm run dev ；
   例如设置了build 则是输入 npm run build 用于打包;
   另一部分是这里可以看到我们需要的依赖包,在dependencies和devDependencies中，分别对应全局下载和局部下载的依赖包。