前言

Vue是现阶段比较流行的前端框架。很多人通过对vue官方文档的学习，对vue的使用有了一定的了解，但是当项目在工程中处理的时候，却发现不知道如何更好的管理自己的项目，不知道如何引入一些框架，不知道vue族bucket的其他框架的使用。下面将详细介绍建筑工程文件的编制过程；对于刚开始移除vue的初学者，建议使用官方脚手架vue-CLI。当然，如果你熟悉webpack，可以自己搭建自己的脚手架。当然，如果您不确定，建议使用vue-cli，它可以更好地帮助您构建项目：

步骤1:安装虚拟命令行界面

首先，我们可以通过npm安装vue-clic，前提是我们需要有一个节点环境。如果计算机没有安装节点，请先安装它，然后通过

Node -v查询节点的版本号。如果有版本号，说明已经安装成功。

接下来，我们需要确保webpack已经安装在计算机上。webpack是一个包管理工具，也是vue-cli的构建工具。安装也非常简单，只需要执行全局安装

Npm安装webpack -g接下来，开始安装我们的vue-cli

Npm install - global vue-cli要检查安装是否成功，我们可以在cmd中输入vue -V进行检查，下图中的版本号表示安装已经完成；

我们可以打开c盘用户名AppDataRoamingnpm来查看我们全局安装的vue-cli，如下图所示：

步骤2:构建工程文档

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

Vue init webpack projectName生成webpack支架。当我们按回车键时，会出现一些提示问题。对应关系如下：

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

然后，我们使用cd squareRoot移动到squareRoot文件夹并执行

国家预防机制安装

初始化项目并安装package.json文件中描述的依赖项。初始化后，我们可以使用

Npm run dev运行我们的项目。这时我们可以打开浏览器，输入http://LocalHost 33608080/，看到如下界面，表示我们的项目脚手架已经初始化；

第三步：项目结构分析

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

相关代码主要放在构建文件夹和配置文件夹中，包括开发环境和生产环境，即dev和product。文件可以打开阅读。接触过node的小伙伴应该能快速读取对应的文件代码，这里就不详细介绍了。需要注意的是，当我们需要修改打包文件的路径时，可以在config文件夹中修改index.js文件，如下图所示：

在这里，我们需要在src目录中添加一个页面文件夹来存储与页面相关的组件，这些组件作为公共组件存在，这有利于我们更好地理解项目：

第四步：介绍用户界面框架iView

这一步不一定要实现。在实际的项目操作中，应该根据具体的需求引入或者不引入相应的UI框架。鉴于引导的作用，这里也是一个示范供参考。可以先看iVew官网；

首先，我们应该安装iView，它可以通过npm包管理工具安装

NPM installiview-save安装成功后，我们将在项目中引入相应的框架。此时在官网上有两种实现方式。第一种是在main.js中直接配置以下内容：

从“vue”导入Vue从“App”导入。/App“从导入路由器”。/router '从' iView '导入iView；导入“iview/dist/style/iview . CSS”；vue . config . production tip=false vue . use(iView)；/* ESL int-disable no-new */new vue({ El : ' # app '、路由器、组件： {app}、template3360' app/'})是全局导入方式，导入后特定页面或组件不需要其他导入。但是缺点是不管组件是否需要，都会全部导入，对于性能优化不是很好。在这里，我们推荐第二种用法，并根据需要进行介绍。这里，我们需要在插件babel-plugin-import的帮助下根据需要加载组件，以减小文件大小。首先，您需要在中安装和配置它。babelrc:

npm安装babel-plugin-导入-保存-dev/。babe LRC { ' plugins ' :[[' import '，{ 'libraryName': 'iview '，Library directory ' : ' src/components ' }]}然后根据需要引入组件，这样可以减少体积。这里需要注意的是，因为我们修改了。babelrc文件，这将导致我们第一个引入方法的失败，如果我们再次以那种方式引入它，代码将报告错误；

模板div class=' content ' div class=' title '患者咨询/div按钮类型=' primary '形状=' circle' class=' BTN时间'临时保存/Button按钮类型=' primary '形状=' circle ' class=' BTN-取消'取消就诊/按钮按钮类型=' primary '形状=' circle ' class=' BTN-完成'完成就诊/Button/div/Template脚本导入{button}从' iview '导出默认{ name: ' f header，components : { Button }/脚本

步骤5:使用虚拟路由器

如果你还没有看官方文件，我建议你先看一下。官网上的教程足够详细，受益匪浅；在学习过程中，我们需要了解路线配置、命名规则、嵌套路线、路线参数、命名视图、路线守卫、滚动行为和惰性加载的基本步骤。我们在这里就不详细介绍了，但是我们在官网已经有了。我们在这里进行构建的配置和延迟加载处理：

首先，我们应该安装vue-router，它在我们生成项目时已经加载了依赖项。下一步是在路由器文件的index.js下配置它：

从“vue”导入Vue从“vue-router”导入Router Vue . use(Router)导出默认新Router({ scrollBehavior (to，from，savedPosition) { return { x: 0，y : 0 0 } }，routes: [ { path:'/'，redirect:'/root' }，{ path 3: '/root '，name: ' root '，components : { left 3:()=导入vue')}}])在上面的代码中，我们应用了几个知识点，首先是滚动，这里我们配置了当路由跳转时，默认是滚动到(0，0)，也就是页面开始位置，其次我们使用的重定向是路由重定向的一种配置。在路由“/root”下，配置了命名视图，并将相应的组件加载到相应的视图中。箭头功能用于引入组件。写这篇文章的目的是为了实现路径的延迟加载。这样，只有在执行路由时，才能引入相应的组件，这对页面性能的优化有很大帮助；这里还要注意的是，默认情况下，所有导入的组件实际上都被打包到一个文件中，这将导致一次导入的文件太大。因此，我们可以使用webapck打包工具。我们在buildwebpack.base.conf.js文件下添加以下代码来配置输出文件的模块名，其中[name]是文件的名称，[chunkhash]是打包文件的哈希值。

然后将组件的代码引入路由文件，如下所示：

{path:'/test '，name:' test '，component 3360()=import(/* webpackchunkname : ' test ' */' @/page/test . vue ')}在引入组件时，添加/webapckChunkName: '文件名'/，这样可以将的组件打包到指定名称的文件中，从而减小首次加载的文件大小。对于一些不相连的功能，比如不同的页面，我们可以将相应的组件放在同一个文件中，这样可以减少第一次加载的文件大小，同时实现文件的按需加载，提高页面性能。

通过控制台，我们可以查看当前加载的文件资源。当我们单击测试按钮时，页面会跳转。这时我们会发现，在Network下，会添加一个新的资源加载信息，这是我们分块打包后请求的资源；

步骤6:引入全局过滤器和全局注册组件

这个时候很多人可能会认为全局注册filter和全局组件不是很简单，Vue.filter()和Vue.component()很快就会解决。其实这是真的，但是你有没有想过，注册所有的组件都是挂载在Vue对象下，也就是说按照正常的思维，我们应该把它们写在main.js文件下，这样会造成，我们写的main文件太长了，你可以考虑一下。在里面写全局滤镜和组件，真的很丑，不优雅。让我们告诉你一个优雅的实现方法：首先，我们在srcassets目录下创建一个新的js文件夹，然后在这个文件夹下创建filters.js的文件，如下所示：

接下来，我们在filters.js文件下编写我们的全局过滤器，将其抛出，并编写一个时间过滤器作为示例：

const full time=val={ var Date obj=new Date(Number(val))；var year=DateObj . GetFullyear()；var month=DateObj . GetMount()1 9？(DateObj . GetMount)(1)。toString():“0”(DateObj . GetMountain()1)。toString()；var date=dateObj.getDate() 9？dateObj.getDate()。toString():“0”DateObj . GetDate()。toString()；var hour=dateObj.getHours() 9？dateObj.getHours()。toString():“0”DateObj . Gethours()。toString()；var minutes=DateObj . GetMinutes()9？dateObj.getMinutes()。toString():“0”DateObj . GetMinutes()。toString()；返回年'/'月'/日'小时' : '分钟；};Module.exports={ fullTime}完成这一步后，实际上我们还没有完成过滤器的编写，需要在main.js中编写一个注册函数：

从“vue”导入Vue从“App”导入。/App“从导入路由器”。/router“从导入过滤器”。/assets/js/filters ' import ' iview/dist/style/iview . CSS '；Object.keys(筛选器)。forEach(key={ Vue.filter(key，filters[key]))})Vue . config . production tip=false/* eslint-disable no-new */new Vue({ El : ' # app '、Router、components: { app }、template3360' app/'})这样，我们就在Vue全局下的filters文件下注册了过滤器函数。同样，我们可以根据同样的想法注册全局组件。我们在srcassetsjs下创建一个新的components.js文件，引入我们想要注册的全局组件，导出一个对象，并使用object

//从“@/components/testinput.vue”导入测试输入，导出默认值{ testin put : testin put }//从“”导入组件。/assets/在main.js. JS/components '对象下。按键(组件)。foreach (key={vue。component (key，components[key]))})已经优雅地完成了全局组件和全局过滤器的注册，接下来就是API管理阶段。

步骤7:请求应用编程接口管理

这里，我们使用axios来启动异步请求。安装非常简单。NPM可以安装axios。刚开始的时候，我在每个组件中都直接使用了Axios，后来发现了。但是，当我需要修改api接口时，找到它们是很麻烦的，只是因为所有的API都不是集中管理的，从请求回来的每个接口都需要编写相应的错误处理。真的很麻烦。这里我创建了一个新的fecth文件夹，并在它下面创建了一个api.js来存储所有axios处理和封装。

//fetch/api.jsimport axios从' axios '导出函数fetch(url，params) { return new Promise((解析，拒绝)={ axios.post(url，params))。然后(response={ resolve(response . data)})。catch(error={ console . log(error)reject(error)})} } getDefaultData=()={ return fetch('/API/getBoardList ')；}导出默认值{getDefaultData}这样做的好处是所有api接口都集中管理。当我们需要修改接口相关代码时，只需要在api.js中进行修改，包括路由修改和路由拦截，可读性更好；在不同的组件中，我们只需要用解构和赋值的思想将相应的接口引入到相应的组件中。

从“@/fetch/api.js”导入{getdefaultdata}步骤8:配置代理服务器

这个函数主要是我们调试接口的时候用的，因为我们运行npm run dev的时候，我们的项目其实已经挂载在本地服务器上了，端口号是我们配置的8080。当我们要访问这个项目下服务器的接口数据时，会出现跨域的问题。此时，我们需要使用代理来代理我们的数据请求。vue-cli中配置了相关代码，我们只需要编写相应的代理规则。

首先，我们在fetch文件夹下创建一个新的config.js文件来存储我们的代理路径配置：

const URL=' http://www . da yib.com/'；让ROOTIf(过程。env . node _ env==' production '){//Address ROOT=生产环境中的url} else {//开发环境中的代理地址，解决了本地跨域跨域的问题，配置在带有ROOT='/' }导出的config目录下的index.js dev.proxyTable中。PROXYROOT=url//代理指向地址导出。ROOT=ROOT接下来，我们将在配置目录中创建新的proxyConfig.js来存储代理服务器的配置规则：

var config=require('./src/fetch/config’)；模块。导出={proxy: {[config。root]: {//需要代理的接口通常用前缀来区分，但我个人并不添加，也就是将“/”转发给proxy target:config。普罗西罗德。//接口域名变更origin in : true，//跨域路径重写3360 {[`/`]: ' '//是否需要重写，但是对于上面的配置，不需要}}}}最后我们把我们的代理规则引入到config目录下的index.js文件中，在，也就是，

Var proxyconfig=require('。/proxyconfig’).//省略号表示省略其他代码模块。导出={ 0.proxytable: proxyconfig。代理人，}而重启项目后，我们可以实现代理转发来实现跨域请求。

步骤9:引入vuex状态管理

最后，我们来到了最后一步，那就是我们的状态管理vuex。其实这个东西并不是说所有的项目都需要引入，而是建议在同一数据源上需要进行大量操作的时候使用。如果每个组件的数据都可以在data中轻松管理，那么就没有必要引入它。这个管理工具更友好的解决了组件之间的价值传递问题，包括兄弟组件；

首先，我们需要安装vuex，旧的规则是

npm install vuex的安装完成后，我们需要对我们的项目进行一些修改。首先，我们需要在src下添加一个store文件夹，作为vuex的数据存储位置。在开始建设之前，我们需要有vuex的相关知识，所以我就不一一讲解了。我自己百度了vuex的官方文档；众所周知，vuex具有状态、getter、突变、action等关键属性。state主要用来存储我们原始的数据结构，这和vue的数据类似，但是它是全局的，getter类似于computed属性，突变主要用来触发修改state的行为，而actions也是一个触发动作。唯一与突变不同的是，异步操作只能在动作中执行，不能在突变中执行，这样浏览器可以更好地跟踪状态中数据的变化。

接下来，让我们看看商店文件夹中有什么：

从上图可以看出，我创建了一个index.js条目文件，getters.js、variation . js、mutationtypes.js和actions.js我们先来看看index.js的源代码：

从“vue”导入Vue从“vuex”导入Vuex从“@/store/actions.js”导入getters从“@/store/getter . js”导入突变从“@/store/ventures . js ' Vue . use(Vuex)const state={ recipliest :[]，currecipe :0 }；If (module.hot) {//使动作和突变成为可热重加载的模块。很热。接受([')。/突变']，()={//获取更新后的模块//因为巴别塔6的模块编译格式问题，需要添加`。默认“const new突变=require”。/ventures)在这里//加载新模块store . hot update({ ventures : new ventures，})}}导出默认的新Vuex.store ({state，ventures，getters，actions})首先，我们将Vuex插件引入vue。和一个新的Vuex。Store()对象被创建，其中的属性值来自我们之前创建的文件夹。中间的module.hot是一个将我们的动作和突变配置为可热重加载的模块，更方便我们的调试。在我们创建了Vuex.store对象之后，我们需要在main.js页面的Vue对象中声明它。

从“”导入存储。/store/index '.newvue ({el:' # app '，路由器，商店，components: { app }，template3360' app/'})使用突变时，我们建议您将所有的行为常量保存在一个. js文件中，这样更有利于管理我们的项目，因为我们的突变往往需要通过动作进一步封装，所以我们在使用时，只需要修改常量对象中的属性值，就可以同时修改突变和动作的对应关系，一举两得。这里有一个例子供你参考：

//mutationType.jsexport默认值{ ADD _ NEW _ RECIPT : ' ADD _ NEW _ RECIPT '，CHANGE _ CURR _ TAB : ' CHANGE _ CURR _ TAB ' }//突变. jsimport来自' @/store/mutationTypes.js'const突变={ [mutationTypes。ADD_NEW_RECIPT](状态，项目){ state . recipliest . push(项目)；}，[突变类型。CHANGE_CURR_TAB](状态，索引){ state.currRecipe=index} };导出默认突变从“@/store/mutationTypes.js”导入突变类型const actions={ add _ new _ recipt :({ commit，state}，type)={ commit(mutationTypes。ADD_NEW_RECIPT，类型)；}，change_curr_tab:({commit}，index)={ commit(mutationTypes。CHANGE_CURR_TAB，index)} }；导出默认动作从上面的例子中，我们可以看到动作和突变使用相同的常量表，这样可以更好地管理我们的修改动作，不会出现任何不匹配的错误；

最后，我们将存储在vuex中的状态和动作引入组件，如下所示

从“vuex”导入{mapActions，mapState}.computed: {.mapState({ recipliest : state=state . recipliest，currecipe : state=state . currecipy })}，methods: {.mapActions([ 'add_new_recipt '，' change_curr_tab' ])，Addnewrecipt (type) {this。add _ new _ recipt (type)}}建议您使用mapActions和mapState，并根据示例使用三点扩展程序引入状态和动作。状态最好存储在组件的计算属性中。这样，当状态中的数据发生变化时，computed中定义的变量值会被实时修改，实现数据绑定。同时，当我们修改一些数据时，要同步到状态，这样数据源才能保持一致性和准确性；

摘要

我写这个的时候，只是给了一个自己构建项目文件的想法，并不是说要把所有相关的知识点都讲一遍，需要一些相关的知识。但是我相信没有自己建过项目文件的朋友不会知道怎么安排，可以参考一下。在这里，我们建议您安装chrome的扩展，Vue.js devtools，它可以有效地帮助我们跟踪数据和定位错误。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。