前言

vue是现阶段很流行的前端框架，很多人通过vue官方文档的学习，对vue的使用都有了一定的了解，但再在项目工程化处理的时候，却发现不知道改怎么更好的管理自己的项目，如何去引入一些框架以及vue全家桶其他框架的使用，以下将详细地介绍本人在处理工程文件构建的过程；对于刚开始解除vue的新手，建议使用官方脚手架vue-cli,当然，如果你对于webpack很熟悉，你也可以自己动手搭建自己的脚手架，当然如果你没把握的话，还是推荐使用vue-cli，能更好的帮助你搭建项目：

步骤一、安装vue-cli

首先，我们可以通过npm安装vue-clic,前提是我们需要有node环境，如果电脑还没安装node，先安装，可通过

node -v

查询node的版本号，有版本号则已经安装成功；

接下来，我们需要确保电脑已经安装了webpack，webpack是一个包管理工具，也是vue-cli的构建工具，安装也很简单，全局安装只需要执行

npm install webpack -g

紧接着，开始我们vue-cli的安装

npm install --global vue-cli

查看是否安装成功，我们可以通过在cmd中输入vue -V 查看，如下图出现版本号则说明安装已经完成；

我们可以打开c盘>用户>用户名>AppData>Roaming>npm查看我们全局安装的vue-cli,如下图：

步骤二、构建工程文件

安装完vue-cli后，我们可以通过在cmd中输入

vue init webpack projectName

生成webpack脚手架，在我们按下回车的时候，会出现一些提示问题，对应关系如下：

• 项目名称(注意名称中不要出现大写字母，否则会报错)
• 项目描述(可写可不写，看个人需要)
• 作者(可写可不写，看个人需要)
• vue编译，这个选默认即可，运行加编译Runtime + Compiler
• 是否安装vue-router是否安装vue路由工具
• 是否使用代码管理工具ESLint管理你的代码
• 后面几个是测试的工具，需要自己自行了解
• ......

紧接着，我们使用cd squareRoot 移动到文件夹squareRoot下，执行

npm install

初始化项目，安装package.json 文件中描述的依赖，初始化完成后，我们可以通过

npm run dev

运行我们的项目，这个时候，我们可以打开浏览器，输入http://localhost:8080/，可看到如下界面，说明我们的项目脚手架已经初始化完成；

步骤三、项目结构解析

虽然我们是通过vue-cli生成的项目结构，但还是希望读者能够清楚的知道每个文件的作用，这样对于我们学习该脚手架以及搭建自己的脚手架会有很好的帮助，如下图，是一级目录下的文件的作用：

构建相关的代码主要是放在build文件夹和config文件夹下，包括了开发环境和生产环境，即dev和product,可以打开文件进行阅读，有接触过node的小伙伴应该可以很快读懂对应文件代码的作用，这里就不做详细的介绍了，需要注意的一点是，我们需要修改打包后文件的路径的时候，可以通过修改config文件夹下的index.js文件，如下图：

这里，我们需要在src目录下新增一个page文件夹，用于存放页面相关的组件，而components存在的是公共的组件，这样做有利于我们更好的理解项目：

步骤四、引入UI框架iView

该步骤并不是一定要实现的，实际项目操作中，要根据具体需求而引入对应的UI框架或者不引入，鉴于指导的作用，在此处也做个示范，给与参考，可先阅读iVew官网学习；

首先，我们应进行iView的安装，可利用npm包管理工具安装

npm install iview --save

安装成功后，我们要将对应的框架引入到项目中，这个时候，官网上有两种方法可以实现，第一种是直接在main.js中做如下配置：

import Vue from 'vue'import App from './App'import router from './router'import iView from 'iview';import 'iview/dist/styles/iview.css';Vue.config.productionTip = falseVue.use(iView);/* eslint-disable no-new */new Vue({ el: '#app', router, components: { App }, template: ''})

这种方式是一种全局引入的方式，引入后就在具体的页面或者组件内不需要再进行其他的引入，但缺点是无论是否需要该组件，都将全部引入，对于性能优化不是很好，这里推荐第二种用法，按需引入，这里需要借助插件babel-plugin-import实现按需加载组件，减小文件体积。首先需要安装，并在.babelrc中配置：

npm install babel-plugin-import --save-dev// .babelrc{ "plugins": [["import