vue项目搭建以及全家桶的使用详细教程(小结)

前言

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 = false
Vue.use(iView);
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

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

npm install babel-plugin-import --save-dev
// .babelrc
{
 "plugins": [["import", {
  "libraryName": "iview",
  "libraryDirectory": "src/components"
 }]]
}

然后这样按需引入组件,就可以减小体积了,这里需要注意的是,因为我们修改了.babelrc文件,这将导致我们第一种引入方法失效了,如果再使用那种方式引入,会导致代码报错;

<template>
 <div class="content">
  <div class="title">患者接诊</div>
  <div>
   <Button type="primary" shape="circle" class="btn-time">临时保存</Button>
   <Button type="primary" shape="circle" class="btn-cancel">取消就诊</Button>
   <Button type="primary" shape="circle" class="btn-done">完成就诊</Button>
  </div>
 </div>
</template>

<script>
 import {Button} from 'iview'
 export default {
  name: "fHeader",
  components:{
   Button
  }
 }
</script>

运行结果如下图

步骤五、vue-router的使用

如果没有阅读过官方文档,建议大伙先阅读,官网上的教程已经足够详细,受益匪浅;学习的过程中,需要了解路由配置的基本步骤,命名规则,嵌套路由,路由传参,具名视图以及路由守卫,滚动行为和懒加载,这里我们就不一一详细介绍了,官网已有,我们这里是做构建是的配置和懒加载处理:

首先,我们应该是安装vue-router,这个在我们生成项目的时候,已经将该依赖加载进来了,下一步要做的是在router文件下index.js进行配置:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
 scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
 },
 routes: [
  {
   path:'/',
   redirect:'/root'
  },
  {
   path: '/root',
   name: 'root',
   components: {
    Left:() => import('@/page/rootLeft.vue'),
    Middle: () =>import('@/page/rootMiddle.vue'),
    Right: ()=>import('@/page/rootRight.vue')
   }

  }

 ]
})

上面的代码中,我们应用到了几个知识点,首先是滚动行文,这里我们配置了当路由跳转的时候,默认是滚动到(0,0)位置,即页面开始位置,其次我们用到的redirect是一个路由重定向的配置,接下来,在路由"/root"下,配置了具名视图,加载对应组件到对应视图,我们引入组件的方式使用到了箭头函数,这样写的目的是为了实现路由的懒加载,这样构建,只有在路由被执行的时候,才有引入对应的组件,对于页面性能的优化有很大的帮助;这里还需要注意的是,我们在引入的这些组件中,其实默认都是打包到一个文件下的,这样就会导致一次性引入的文件过大,为此,我们可以利用webapck打包工具,我们在build>webpack.base.conf.js文件下,增加如下代码,用于配置输出文件的模块名称,[name]是文件的名称,[chunkhash]是打包文件的哈希值,加上这个是为了将其作为版本号,以解决浏览器缓存机制带来的问题:

然后在路由文件中引入组件的代码如下:

{
   path:"/test",
   name:"test",
   component: ()=>import(/*webpackChunkName:"test"*/'@/page/test.vue')
}

在引入组件的时候,加上/ webapckChunkName: "文件名" /,就这可以将对于的组件打包到指定名称的文件下,这样可以减少首次加载的文件的大小,对于一些没有联系的功能,比如不同页面,我们可以把对应的组件放在同一个文件,这样,既可以减少首次加载文件达大小,同时也可以将文件实现一个按需加载,提高页面性能;

通过控制台,我们可以查看当前加载的文件资源,当我们点击测试按钮的时候,页面发生的跳转,这时候,我们会发现,在Network下,会加一条新的资源加载信息,这一条就是我们的分块打包后请求的资源;

步骤六、全局过滤器filter和全局注册组件的引入

写到这里的时候,可能很多人都会觉得,全局注册filter和全局组件组件不是很简单吗,直接Vue.filter()和Vue.component()不久解决了吗,其实这么讲也没错,但是你可曾想过,注册全组件是挂载在Vue对象下的,这意味这按照正常思路,我们要写在main.js文件下,这样就会造成,我们所写的mian文件过于冗长,你可以想一下,把全局的过滤器,和组件都写进去,着实丑陋,很不优雅,下面跟大家说一个优雅的实现方法:
首先,我们在src>assets目录下新建一个js文件夹,再该文件夹下再创建一个filters.js的文件,如下图:

接下来,我们在filters.js文件下写我们的全局过滤器,再将其抛出,写一个时间过滤器作为例子:

const fullTime = val => {
 var dateObj = new Date(Number(val));
 var year = dateObj.getFullYear();
 var month =
  dateObj.getMonth() + 1 > 9
   ? (dateObj.getMonth() + 1).toString()
   : "0" + (dateObj.getMonth() + 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();

 return year + "/" + month + "/" + date + " " + hour + ":" + minutes;
};
module.exports={
 fullTime
}

做完这一步,其实我们的过滤器还没写完,还需要在main.js中写一个注册函数:

import Vue from 'vue'
import App from './App'
import router from './router'
import filters from './assets/js/filters'
import 'iview/dist/styles/iview.css';

Object.keys(filters).forEach(key =>{
 Vue.filter(key,filters[key])
})

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

这样,我们就把filters文件下的过滤器函数注册到Vue全局下,同样道理,我们可以按照同样的思路注册全局组件,我们在src>assets>js下新建一个components.js文件,在其中引入我们想注册的全局组件,export出一个对象,使用Object.keys获取后注册到全局下:

//components.js下
import testInput from '@/components/testInput.vue'

export default{
 testInput:testInput
}
//main.js下
import components from './assets/js/components'

Object.keys(components).forEach(key => {
 Vue.component(key,components[key])
})

优雅的注册全局组件和全局过滤器已经讲完,接下来就是API管理阶段了。

步骤七、请求api管理

这里我们使用axios发起异步的请求,安装很简单,npm install axios 即可,一开始的时候,我使用的是直接在每个组件内使用axios,到后面发现,但当我需要修改api接口的时候,需要查找的比较麻烦,只因为没有集中的对所有的api进行管理,而且每个请求回来的接口都需要写对应的报错处理,着实麻烦,这里我新建一个fecth文件夹并在其下新建一个api.js用来存放所有的axios处理和封装,:

//fetch/api.js
import axios from 'axios'

export function fetch(url, params) {
 return new Promise((resolve, reject) => {
  axios.post(url, params).then(
   response => {
    resolve(response.data)
   }
  ).catch(error => {
   console.log(error)
   reject(error)
  })
 })
}

getDefaultData=()=>{
 return fetch('/api/getBoardList');
}
export default {
 getDefaultData
}

这样做的好处是集中化的管理了所有的api接口,当我们需要修改接口相关的代码,只需要在api.js中修改,包括路由修改以及路由拦截等,可读性更好;在不同的组件内,我们只需要把对应的接口用解构赋值的思想把它引入对应的组件内即可使用。

import {getDefaultData} from '@/fetch/api.js'

步骤八、代理服务器的配置

这个功能主要是我们在调试接口的时候使用,因为当我们运行npm run dev 的时候,实际上我们的项目已经挂载在一个本地服务端运行了,端口号为我们配置的8080,当我们想在该项目下访问服务端接口数据的时候,就会产生跨域的问题,这个时候,我们就需要使用到proxy代理我们的数据请求,在vue-cli中已有配置相关的代码,我们仅需要把对应的代理规则写进去即可,这里以一个通用配置例子实现;

首先,我们在fetch文件夹下新建一个config.js的文件,用于存放我们的代理路径配置:

const url = 'http://www.dayilb.com/';
let ROOT;
if (process.env.NODE_ENV === 'production') {
 //生产环境下的地址
 ROOT = url;
} else {
 //开发环境下的代理地址,解决本地跨域跨域,配置在config目录下的index.js dev.proxyTable中
 ROOT = "/"
}

exports.PROXYROOT = url; //代理指向地址
exports.ROOT = ROOT;

接下来,我们要在config目录下新建一个proxyConfig.js,存放代理服务器的配置规则:

var config= require("../src/fetch/config");
module.exports = {
 proxy: {
  [config.ROOT]: {  //需要代理的接口,一般会加前缀来区分,但我个人是没加,即‘/'都转发代理
   target: config.PROXYROOT, // 接口域名
   changeOrigin: true, //是否跨域
   pathRewrite: {
    [`^/`]: ''  //需要rewrite的,针对上面的配置,是不需要的
   }
  }
 }
}

最后,我们在config目录下的index.js文件中,引入我们的代理规则,并在,即

var proxyConfig=require('./proxyConfig')
...//省略号表示省略其他代码
module.exports = {
...
proxyTable: proxyConfig.proxy,
...
}

重新启动项目,我们就可以做到代理转发来实现跨域请求了。

步骤九、vuex状态管理引入

终于,来到了最后一步,那就是我们的状态管理vuex,其实这个东西不是说所有项目都需要引入,看项目的具体需求,但需要对同一个数据源进行大量的操作的时候,建议使用,如果每个组件的数据都可以轻易的在data中管理,那其实是没必要引进去的,该管理工具是更友好的解决了组件间传值的问题,包括了兄弟组件;

首先,我们需要安装vuex,老规矩就是

npm install vuex

安装完成后,我们需要对我们的项目进行一些修改,首先是我们的目录,我们需要src下新增一个store文件夹作为vuex数据存放位置,在开始搭建前,我们需要有vuex的相关知识,我就不一一说明,自行百度一下vuex官方文档;众所周知,vuex有state,getter,mutation,action等关键属性,state主要是用于存放我们的原始数据结构,类似与vue的data,不过它是全局的,getter类似于计算属性computed,mutation主要用于触发修改state的行为,actions 也是一种触发动作,只不过与mutation的区别在于异步的操作我们只能在action中进行而不能在mutation中进行,目的是为了浏览器更好的跟踪state中数据的变化。

接下来,我们来看一下store文件夹中都有什么:

从上图可知,我创建了一个index.js入口文件,getters.js,mutation.js和mutationtypes.js,以及actions.js,下面我们先看看index.js的源码:

import Vue from 'vue'
import Vuex from 'vuex'

import actions from '@/store/actions.js'
import getters from '@/store/getters.js'
import mutations from '@/store/mutations.js'

Vue.use(Vuex)
const state = {
 recipeList:[],
 currRecipe:0
};
if (module.hot) {
 // 使 action 和 mutation 成为可热重载模块
 module.hot.accept(['./mutations'], () => {
  // 获取更新后的模块
  // 因为 babel 6 的模块编译格式问题,这里需要加上 `.default`
  const newMutations = require('./mutations').default;
  // 加载新模块
  store.hotUpdate({
   mutations: newMutations,
  })
 })
}
export default new Vuex.Store({
 state,
 mutations,
 getters,
 actions
})

首先,我们把Vuex插件引入vue中,并新建了一个Vuex.Store()对象,其中各项属性值来自我们前面所创建的文件夹,中间module.hot是配置我们的action和mutation成为可热重载的模块,对于我们的调试更方便,当我们创建为Vuex.store对象后,我们还需要把它声明到main.js的页面Vue对象中

import store from './store/index'

...
new Vue({
 el: '#app',
 router,
 store,
 components: {App},
 template: '<App/>'
})

在使用mutation的时候,我们是推荐大家把所有的行为常量保存到一个.js文件中,这样更有利于管理我们的项目,因为我们的mutation往往是需要使用action进一步封装的,这样我们在使用的时候,只需要修改常量对象里的属性值,就可以达到同时修改mutation和action的对应关系,一举两得,下面举例给大家参考:

//mutationType.js
export default {
 ADD_NEW_RECIPT:'ADD_NEW_RECIPT',
 CHANGE_CURR_TAB:'CHANGE_CURR_TAB'
}
//mutations.js
import mutationTypes from '@/store/mutationTypes.js'

const mutations = {
  [mutationTypes.ADD_NEW_RECIPT](state, item) {
   state.recipeList.push(item);
  },
  [mutationTypes.CHANGE_CURR_TAB](state, index) {
   state.currRecipe=index;
  }
 }
;
export default mutations
import mutationTypes from '@/store/mutationTypes.js'

const actions = {
 add_new_recipt:({commit,state}, type)=>{
  commit(mutationTypes.ADD_NEW_RECIPT,type);
 },
 change_curr_tab:({commit},index)=>{
  commit(mutationTypes.CHANGE_CURR_TAB,index)
 }
};

export default actions

从上面的例子可以看出,action和mutation使用的是同一个常量表,可以更好的管理我们的修改动作,而不会出现对不上的错误;

最后,我们在组件内引入vuex中存放的state和action,如下

import {mapActions, mapState} from 'vuex'
...
computed: {
   ...mapState({
    recipeList: state => state.recipeList,
    currRecipe: state => state.currRecipe
   })
  },
methods: {
   ...mapActions([
    'add_new_recipt',
    'change_curr_tab'
   ]),
   addNewRecipt(type) {
    this.add_new_recipt(type)
   }
  }

这里是推荐大家按照例子中,使用mapActions和mapState以及利用三点扩展符来引入state 和action,state最好存放在组件的computed 属性内,这样当state中的数据发生改变的时候,也会实时的修改computed里定义的变量值,来实现数据的绑定,同时,当我们修改了某些数据的时候,也要同步到state中去,这样数据源才可以保持一致性与准确性;

总结

写这个的时候,只是给个思路去搭建自己的工程文件,并不是说把所有相关知识点都讲一遍,需要有一定的相关知识,不过相信还没自己搭建过工程文件的小伙伴会不知道如何去安排,可以参考参考,这里推荐大家安装chrome的扩展插件Vue.js devtools,可以很有效的帮助我们追踪数据,定位错误。

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

(0)

相关推荐

  • Vue全家桶实践项目总结(推荐)

    从前端的角度看,Vue可以说是目前最理想的前端MVVM框架,一切为界面服务,上手难度低,本文就将记录使用Vue全家桶(Vue+Vue-router+Vuex)重构一个jQuery+template项目的过程,以及期间的收获. 入门 Vue的官方文档就是学习Vue的最佳教程,没有之一,可能因为框架作者是设计出身,没有后端背景,因此各种抽象概念在Vue里都得以用最容易理解的方式被恰到好处的阐述,这里只简单介绍Vue.Vue-router.Vuex的概念,要全面学习建议去官方文档. Vue Vue的核

  • 浅谈Vuex的状态管理(全家桶)

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 以上是vuex的官方文档对vuex的介绍,官方文档对vuex的用法进行了详细的说明.这里就不再细讲vuex的各个用法,写这篇博客的目的只是帮助部分同学更快地理解并上手vuex.

  • Vue 全家桶实现移动端酷狗音乐功能

    Vue 已经用了不少时间,最近抽空把以前的未完成的酷狗音乐做完了,过来分享下,也可以直接点这里预览,注意切换成手机模式. 技术栈: vue-router.eventBus.vuex.vue-awesome-swiper 整体功能 vs 酷狗官网: 总体模拟官网,原来的亮点保留,如: 图片懒加载 除此之外,增加了 加了全局的 Loading 组件,根据不同页面调整 Loading 尺寸 搜索页面做了优化,可以在刷新时保留之前的搜索结果 播放页面单独做了一个路由,可以在刷新时保留当前歌曲页面 播放器

  • 全面介绍vue 全家桶和项目实例

    简介 "简单却不失优雅,小巧而不乏大匠". 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,"vue.js兼具angular.js和react.js的优点,并剔除了它们的缺点".授予了这么高的评价的vue.js,也是开源世界华人的骄傲,因为它的作者是位中国人–尤雨溪(Evan You). Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计.

  • vue项目搭建以及全家桶的使用详细教程(小结)

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

  • django+vue项目搭建实现前后端通信

    目录 django 环境搭建 前端项目搭建 前端项目结构 曲线救国打通vue和django vue适配django django适配vue django 环境搭建 1.创建django骨架项目 django-admin startproject yiyan_webauto 2.创建应用 python manage.py startapp myapp 3.试着启动项目,验证环境OK python3 manage.py runserver 4.基础配置 admin.py 把数据库的具体表注册到后台来

  • 在Vue项目中引入腾讯验证码服务的教程

    什么是腾讯验证码?它长这个样子--:point_down: 最近公司项目要求引入腾讯云验证,要求是这样的: 为了防止别人恶意刷短信验证码,当用户短时间内多次获取验证码的时候,需要调用腾讯验证码,验证成功后会继续自动发送验证码 ,刚开始的我听的一脸蒙蔽,网上搜索也没有多少相关的文章,然而现在我接通啦,发现是很简单点事(或许就是因为太简单了所以没有人写2333-) 不多BB,开始吧! 先看文档的接口调用流程: (文档地址: cloud.tencent.com/document/pr- ) 总共分成几

  • 搭建一个开源项目两种方式安装git的详细教程

    一.开始工具的安装 1.git 安装git工具有两种方式,一种就是利用自带包管理工具,一种是源码编译安装 (1)由于CentOS已经具有包管理器因此只需要一行命令即可自动安装 yum install git (2)自行下载git安装包,进行安装首先下载tar包,然后移动到root目录中 从图中可见移动的轨迹,下面使用解压命令解压,得到目录git-2.28.0 tar -zxvf 复习tar是用来建立,还原备份文件的工具程序,它可以加入,解开备份文件内的文件. 参数: -z或--gzip或--un

  • vue项目中使用ts(typescript)入门教程

    目录 1.引入Typescript 2.配置文件webpack配置 3.让项目识别.ts 4.vue组件的编写 data()中定义数据 props传值 完整代码案例 最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入Typescript npm install vue-class-component vue-property-decorator --

  • SpringBoot + Vue + Electron 开发 QQ 版聊天工具的详细教程

    一.简介 这是一款基于 JS 实现的超轻量级桌面版聊天软件.主要适用于私有云项目内部聊天,企业内部管理通讯等功能,主要通讯协议websocket.也支持web网页聊天实现.文字聊天,互传文件,离线消息,群聊,断线重连等功能. 先看一下效果,下图左边是web版,右边为PC版. 二.本地搭建 2.1 技术栈 后端技术栈: springboot: 让开发人员快速开发的一款Java的微服务框架. tio: 是百万级网络框架oauth2.0: OAuth 2.0 是一个行业的标准授权协议. OAuth 2

  • 如何快速搭建一个自己的服务器的详细教程(java环境)

    一.   服务器的购买 1. 我选择的是阿里云的服务器,学生价9.5元一个月,百度直接搜索阿里云,然后点击右上角登录,推荐大家用支付宝扫码登录,方便快捷.阿里云官网的东西比较多,登录后我找了很久也没有找到学生服务器在哪里卖,最后在咨询里找到了这个网址,https://promotion.aliyun.com/ntms/campus2017.html,购买的时候需要进行学生认证,按照他的要求一步步来就好,认证大概需要几个小时.如果你不是学生那就直接购买ecs服务器就好,首页就可以看到ecs服务器的

  • IDEA Maven项目使用debug模式运行Tomcat的详细教程

    1.在pom.xml中添加下面的依赖就可以了 <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.0.1</version> <scope>provided</scope> // 这个是作用域 </dependency> <depend

  • requirejs + vue 项目搭建详解

    以前都是支持 司徒正美 的,毕竟咱们也是跟着 司徒正美 一起走进了前端的世界.所以一般MVVM都是用avalon的,当然也是考虑到项目需要支持IE6,7,8的考虑.当然在用的时候也有一些小坑和bug,都处理了.今年正美正好升级avalon2.0,加入虚拟dom的时候,不稳定了,就考试寻找其他的mvvm框架. 看了比较流行的一些框架,最后选择了vue.选择他的原因是 文档比较全,而且还有中文的(你懂的),生态圈比较好,有vux, vue-loader, vue-router ,组件化设计的也很好.

  • Vue项目打包并部署nginx服务器的详细步骤

    目录 使用场景: 一.打包 二.部署(nginx) 总结 使用场景: 我们常使用前后端分离项目时,会需要将前端vue打包然后部署. 一.打包 vue项目其实可以直接通过一下语句进行打包: npm run build 默认打包情况如下: 当我们需要将打包名称以及静态资源位置进行修改时便需要进行相应的配置: 1.首先在项目根目录下创建vue.config.js文件 配置内容如下所示(附带跨域问题解决): module.exports = { //打包 publicPath: './', output

随机推荐